14

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.

alan
  • 840
  • 7
  • 22
  • Does adding a viewport help? It's possible that the browser is inventing a different viewport size in each case. – Josh Lee Nov 17 '17 at 17:34
  • is the behavior as a expected in other browsers/devices? – mad.meesh Nov 17 '17 at 17:38
  • @JoshLee - adding a viewport does not help unfortunately. Adding `` in a `` has no effect. @mad.meesh - It is. On any desktop browser, the video controls span the full width of the video. Same on my iPhone 6 plus. Same on Android Firefox. This appears to be limited to Android Chrome. – alan Nov 17 '17 at 18:23
  • the problem is the video controls that are not being scaled by the transform? I have tested on an full HD phone and it works ok... – Maxwell s.c Nov 23 '17 at 10:55
  • I have run into a similar issue but it was due to a ` – Nathan Perrier Feb 20 '18 at 20:54

3 Answers3

1

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>
Info Admired
  • 11
  • 1
1

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>
Henry7720
  • 116
  • 8
0

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.

Rajan Patil
  • 852
  • 9
  • 15