Geek Answers Handbook

How to make black bars on the side of HTML5 Video on iPad disappear?

I am working on WebApp, which should work mainly on iPads. The application plays several videos and has some interactive components.

My problem is cosmetic: even though the HTML tag works fine, the user controls that I created control the video / audio playback just fine, throughout my life I can’t figure out how to make the black bars on the side of the video disappear.

The attachment is completely standard:

<video id="video" src="./video/video.mp4" width="1024"></video>

I just want the damn video to be as wide as the iPad screen, but no matter what size I specify, there are always black bars on the side. The only workaround I found was to increase the size of the video and then give it a negative margin so that it was the center, but certainly there should be a better solution ... Especially since the width of the black unwanted “margin” is not constant and changes according to the specified width of the video. Has anyone had the same problem? Any idea or help would be greatly appreciated. Thanks to everyone.

+4
source share
1 answer

Thanks for the input. It turned out that I needed to specify the height for the video element, for some reason Safari on the iPad does not scale the video and controls properly; as soon as I explicitly indicated the 16: 9 pixel equivalent in the actual video tag, the panel disappeared in the HTML file.

+4
source

More articles:


All Articles