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

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.

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.

video {
    width: 100%;
    max-width: 100%;
    height: auto;
}

inspired by http://webdesignerwall.com/tutorials/css-elastic-videos. There's a comment on this page which leads me to believe there is a regression in iOS6.

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?

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?

The HTML is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<style>
video {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
          <source src="file.mp4"  type="video/mp4">
          <source src="file.webm" type="video/webm; codecs=vp8, vorbis">
          <source sr="file.ogv" type="video/ogg; codecs=theora, vorbis">
</video>

I see two problems here:

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.
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/

Incorporating part of @brianchirls answer, here's what I did. This seems to be working so far on desktop, Android, and iOS. Take advantage of the responsive padding trick, where padding-top, as a percentage will be a percent of the width. My video is 16:9 so here's my code:

#video-container {
 position: relative;
 padding-top: 56.25%;
}

video, object {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

I had a similar scenario with IOS6 and a video object not resizing to its parent. I resolved it by targeting all elements within the parent div containing the video with CSS. So in your example you would have to surround your video with a div (eg class="DivWithVideo") and add the following CSS:

 .DivWithVideo * {max-width: 100%}

I had to do something similar with user-uploaded videos. This means: I do not know which resolution the video has, it could even be in portrait-mode.

My work-around was to set the height via javascript when metadata is loaded. For most browsers the video is sized correctly from the beginning; on the iPad the video size is adjusted when the user hits play. For me it was okay to let the video grow as soon as I know how big it has to be.

Code (object.id is used because in my setup there could be multiple videos on the same page):

<script type="text/javascript">
    // set height and width to native values
    function naturalSize_{{ object.id }}() {
        var myVideo = document.getElementById('video-{{ object.id }}');
        var ratio = myVideo.videoWidth / myVideo.videoHeight;
        var video_object = $('#video-{{ object.id }}');
        video_object.animate({
            height: (video_object.width() / ratio) + "px"
        }, 1000);
    }

    $(document).ready(function() {
        var myVideo = document.getElementById('video-{{ object.id }}');
        myVideo.addEventListener('loadedmetadata', naturalSize_{{ object.id }}, false);
    })
</script>

If someone has a cleaner solution, perhaps in pure CSS, I would like to see it...

you can use this to set center your video in container with margins as you want. no need to add extra element. fix for iOS 7 specially. pay attention to -webkit-calc prefixes if need

width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);

来源：https://stackoverflow.com/questions/14250583/safari-on-ipad-ios6-does-not-scale-html5-video-to-fill-100-of-page-width

标签

html5

mobile-safari

html5-video

responsive-design