Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width

Question

I am using the following CSS to display a video in full width (100%) on a responsive HTML5 page. The native size of the video is 480x270. The video is scaled to fill the ful

Answer 1

I see two problems here:

1. Mobile Safari will not figure out your video dimensions (or aspect ratio) for you. You have to specify the height and width in the element attributes or CSS, because it's not going to download the video file header at all until you start playing. See this page, third section.

2. Even if you do that, the browser doesn't seem to care. When you set it to auto, it goes back to the default height of 150px. Honestly, I can't figure out why. It's probably a bug. But...

... there is a workaround.

iOS does not seem to have the same problem with a canvas. So you can place a canvas and your video inside a div, which is set to position: relative. Scale the canvas as you would your video. Set the video to position: absolute and height and width both to 100%. That way, the canvas will force the div to be the size you want, and the video will expand to fill the div.

Working sample here: http://jsbin.com/ebusok/135/