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

htmlhtml5-videomobile-safariresponsive-design

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 480×270. 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 (480×270) 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>

Best Answer

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/

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here: http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

Html – scale HTML5 Video and break aspect ratio to fill whole site

this a really old thread, I know, and what I'm proposing is not necessarily the solution you are looking for, but for all people that land here because of searching what I searched: scale the video to fill the video container element, keeping ratio intact

If you want the video to fill the size of the <video> element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-size for background images you can use the following:

video {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

I hope this can be of help for some people.

EDIT: works in most browsers but IE

Best Answer

Related Solutions

Html – Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

Working example

Html – scale HTML5 Video and break aspect ratio to fill whole site

Related Topic