1

Is it possible to move the stock video control bar out of the active video area?

I would prefer that the controls appear right below the video so that nothing gets covered during playback.

I need it this way because it is covering some important info that appears at the very bottom of the video.

Note: I know I can create my own controls but simply moving the stock control bar would be preferable.

Thanks!

user2098138
  • 21
  • 4

2 Answers2

3

As an alternative, you could hide the controls when a user is not hovered over the video using event listenters. Like this:

HTML:

<video id="video1"
poster="https://placehold.it/350x150" autoplay width="300" height="150">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
</video>

JS:

//grabs video element by id
var video1 = document.getElementById('video1');

//functions called on events mouseover and mouseout
function videoPausePlayHandler(e) {
    if (e.type == 'mouseover') {
         //adds the controls
         video1.setAttribute("controls","controls");
    } else if (e.type == 'mouseout') {
         //removes the controls
         video1.removeAttribute("controls");
    }
}

//adding event listeners to video element
video1.addEventListener('mouseout', videoPausePlayHandler, false);
video1.addEventListener('mouseover', videoPausePlayHandler, false);

Here is a working example: https://jsfiddle.net/l33tstealth/n7qq6s8f/6/

l33tstealth
  • 821
  • 8
  • 15
0

If you extend the vertical size of the video, the controls will always be at the bottom of the video window. The video will be centered vertically, but you can move the top margin up to compensate. An additional div (or center) around the video is required to make this work:

<center>
<video 
  style="width:calc(50vw);height:calc(28vw + 125px);margin-top:calc(-70px)"
controls
>
<source src="myVideo.mp4" type="video/mp4">
</video>
</center>

You will want to fiddle with the height, width, and margin to match the size for your particular video. The margin is especially important in order to remove black bars above the video in IE.

(thanks to video-player-shows-black-border for clues to get to this answer)

You could also use a third-party tool such as video.js to probably solve your problem.

michael
  • 245
  • 2
  • 11