I'm trying to figure out if it is possible to change the CSS property for cursor on a default HTML5 video element. So far, my testing has concluded:
No user-agents (browsers) implement cursor: pointer by default. So you are left with the normal OS arrow/control indicator
When you attempt to set cursor: pointer, the user-agents will change the cursor ONLY when the cursor is not over clickable elements within the video element... ie: play, pause, seek, mute, fullscreen.
This seems to be reverse the implementation of what SHOULD happen. The clickable elements of the video tag (control bar, center play button) should get the cursor style...or hell, just apply it to the whole thing.
Does anyone have any insight on this?
For webkit you can target their pseudo elements
video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button
Update
Extended list of webkit pseudo elements: https://gist.github.com/afabbro/3759334