Databases
StackOverflow2013
Postsdbo
POSafari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSafari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
    text
    copied!<p>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 full width of the page on all desktop browsers while maintaining the aspect ratio.</p> <p>However, Mobile Safari and Chrome on my iPad (iOS 6.0.1) shows a black rectangle with the same width as the page. The video is tiny and displayed in its native size (480x270) at the center of the black rectangle.</p> <pre><code>video { width: 100%; max-width: 100%; height: auto; } </code></pre> <p>inspired by <a href="http://webdesignerwall.com/tutorials/css-elastic-videos" rel="noreferrer">http://webdesignerwall.com/tutorials/css-elastic-videos</a>. There's a comment on this page which leads me to believe there is a regression in iOS6.</p> <blockquote> <p>Since upgrading my iPad to iOS 6 this fix doesn’t seem to work any more, I think it’s height: auto causing the issue. Anyone experienced similar and have a fix?</p> </blockquote> <p>Is anyone else experiencing this problem? I there any way to display a HTML5 video in full width on the iPad (iOS6) while preserving the aspect ratio using CSS only?</p> <p>The HTML is as follows:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" /&gt; &lt;style&gt; video { width: 100%; max-width: 100%; height: auto; border: 1px solid red; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;video preload autoplay controls&gt; &lt;source src="file.mp4" type="video/mp4"&gt; &lt;source src="file.webm" type="video/webm; codecs=vp8, vorbis"&gt; &lt;source sr="file.ogv" type="video/ogg; codecs=theora, vorbis"&gt; &lt;/video&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload