Menu
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:
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.
319
What Is the HTML5 Video Tag? The `<video>` element is simply a tag used to embed video content in an HTML document. As of 2022 it is excellently supported across all modern browsers (both mobile and desktop), except for Opera Mini.
In order to ensure that a video is accessible by all of the target browsers, you'll need to provide, at minimum, two different source elements for your video element. Example 1-5 shows an HTML5 web page with a video element containing two different video sources: one in H.
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.
123
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
