HTML5 video controls on Android Chrome don't span full width of video in this simple page

user_276386 0
Viewed 1682

Save this as an html file and load it up in Android Chrome:

<html>
<body style="overflow:hidden;transform: scale(0.5, 0.5);">
        <video controls>
            <source src="http://techslides.com/demos/sample-videos/small.mp4">
        </video>
</body>
</html>

It should look like this:

enter image description here

If you play around with it, you'll find that removing EITHER the overflow:hidden or the transform:scale will make the controls span the whole width of the video as expected. However the combination of these two styles makes any video controls incorrectly sized, as shown.

This question seems somewhat related and suggests adding a transform: translateZ(0) to the containing element, however adding that translation either to the existing transform on the body or onto a new containing div does not resolve the issue.

Is this a bug in Android Chrome? I don't understand why the conjunction of these two styles should affect video control width.

html5-video google-chrome android css
3 Answers

To change the width of the video player's native controls bar you can add following in the css: 

  video::-webkit-media-controls-panel {
    width: 100%;
  }

Here is the good example of styling native controls. I hope this helps you.

user_74974740

you can change the tag to something like this

<video width="100%" height="100%" controls>
        <source src="http://techslides.com/demos/sample-videos/small.mp4">
</video>
user_103960430

You are setting width and height in a non-standard way, though there may legitimately be a bug, but it seems you are setting the width of the video to be half of it's native width. I recommend you set your style to be:

body {
  margin: 0;
  overflow: hidden;
  background-color: #000;
  text-align: center;
}

video {
  display: inline;
  height: 100vh;
}
<!doctype html>
<html>
  <head>
    <title>Some Video</title>
  </head>
  <body>
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
  </body>
</html>

user_61312190
Related