Responsive Video

dealing with the good (HTML5)
and the bad (flash fallback)

Created by Wayne Warner / @wawjr3d

What's the problem?

Implementing a responsive site that needs a video player:

  • Must use set 3rd party HTML5 video solution
  • Video solution doesn't come with responsive option


Goal: Turn a fixed dimension video into a responsive video

Goal: Make video-js responsive

Let's check out the problem

Plan of attack for HTML5 video

  • Strip off the fixed width and height
  • Set the video tag width to 100%


Let's try it out

For HTML5 - easy peasy

...but wait

Is flash fallback responsive w/ HTML5 solution?



Let's see

One thought - use javascript

But we can do better

Want CSS solution for Flash

Idea

  • Create an autosizing box with the aspect ratio of the video
  • Stretch flash embed to fill the box


Let's try it out

The code


.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: (1 / aspect ratio) * 100%;
    /* 16:9 => 56.25%, 4:3 => 75% */
}

video,
object,
embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Why this works

  • Padding top/bottom percentages are relative to width
  • Position absolute lets us render video over padding area
  • It also lets embed stretch it's height past it's parent's
    (Remember container height is 0, want height + padding)

Where does this work?

Everywhere! (Firefox, Chrome, all IEs)

Flash solution works for HTML5 video too!


Let's check it out

We got everything we want! (and no javascript)

Sources

Questions?

THE END

BY Wayne Warner