I'm working on a WebApp that is supposed to run mostly on iPads. The App plays several videos and has some interactive components as well.
My problem is cosmetic: even though the HTML5 Video Tag works fine, the custom controls that I've created control the video/audio playback just fine, for the life of me I can't figure out how to make the black bars on the side of the video disappear.
The embedding is completely standard:
<video id="video" src="./video/video.mp4" width="1024"></video>
I just want the damn video to be exactly 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 is to oversize the video and then give it a negative margin so it'd center, but surely there must be a better solution... Especially because the width of the black unwanted "margin" isn't constant and changes according to the specified width of the video. Has anyone had the same problem before? Any idea or help will be greatly appreciated. Thank you all.
Thanks for the input. It turned out that I had to specify the height for the video element as well, for some reason Safari on the iPad doesn't scale the video and the controls properly; as soon as I explicitly specified the pixel equivalent of 16:9 within the actual video tag, in the HTML file, the bar disappeared.