Placing <video> controls at the top of the video

Question

I am trying to display video controls at the top of a video that I am putting on my company's website, but I haven't found anything on google (or stackoverflow directly) in order to get this to work right. Basically, anything I try keeps the controls at the bottom of the video (which I assume is the default).

 <video class="yadda" width="100%" controls="top">....</video> 

does not work.

Any help would be greatly appreciated!

Answer 1

The controls attribute takes no values- it should be used like this instead:

<video class="yadda" width="100%" controls>....</video>

The controls will appear on the bottom of the video, with standard icons. Unfortunately, the video controls are also not customizable. If you want them at the top, you will have to create your own custom interface.

Information from http://www.w3.org/TR/2008/WD-html5-20080122/#controls

Answer 2

According to this Chrome bug, the media controls are accessible from Javascript. Unfortunately, access seems to be browser specific.

https://bugs.webkit.org/show_bug.cgi?id=86769

Hopefully, these controls will be made accessible via standard methods. I don't want to write my own or use 3rd party media controls when they're already in every HTML5 compliant browser and are being visually manipulated.