Responsive Embedded Video

Posted: July 22, 2012 under Drupal, Web Design

Recently I've been working on the redesign of the Friendly Machine site using the responsive base theme Omega. While importing my content into the new site, I came upon an issue that I thought I'd discuss - how to deal with embedded video in responsive design.

I think the first article I read that discussed scaling video or other embeds was Creating Intrinsic Ratios for Video on A List Apart. It's amazing how many big ideas get started on that blog. Since then there have been other good write ups, but in this post I'm going to give you a really simple solution that will work well for Drupal, particularly if you are using an editor like TinyMCE.

The Problem

First, let's see what this problem looks like.

Responsive video example

In the screenshot above I've added a red border to the containing div that the video is supposed to fit inside. As you can see, the video is extended outside of its container. The solution is to add a box around the video that has its height and width set to the appropriate ratio and will behave itself and stay inside its container.

If you're not familiar with video ratios, they represent the relationship of the width to the height of a screen. An old fashioned television screen has the ratio 4:3, for example. A more modern ratio is 16:9 and is what I'm using in this example.

If you're using TinyMCE on your Drupal site and you add a video, it will automatically add a box around the iframe for you - a simple <p> tag by default. What we're going to do is add a class to this tag called 'iframe'. Here's the markup:

  1. <p class="iframe"&gt;<br>
  2. <iframe src="http://player.vimeo.com/video/video-id-code-here" frameborder="0"></iframe>
  3. </p>

The important point in the code above is that I have removed the height and width attributes that are automatically included in the embed code you get from YouTube or Vimeo. Be sure you take them out to get this to work.

Next let's take a look at the CSS for the iframe class:

  1. .iframe {
  2. height: 0;
  3. position: relative;
  4. padding-bottom: 56.25%;
  5. }

This is where the action really happens. Take a look at the last bit where the padding on the bottom of the element is set to 56.25%. This sets the box to our 16:9 ratio. If you divide 9 by 16, you get 0.5625. The other important point to keep in mind is that as a block-level element, the the width of the paragraph is 100% by default. That's how a box with the appropriate ratio of height to width is created.

If you have a video with a different ratio, just divide the height by width and then multiply by 100 to get your bottom padding as a percent value.  For example in the 4:3 ratio I mentioned above, you divide 3 by 4 and you get .75. Multiply by 100 and your bottom padding should be 75%. I have to say, many thanks to Thierry Koblentz who came up with this. I'm not sure I would have ever thought of using this value as the bottom padding for the container.

But we're not quite done. We need to add some CSS for the actual iframe element inside our <p> tag. It looks like this:

  1. .iframe iframe {
  2. left: 0;
  3. height: 100%;
  4. position: absolute;
  5. top: 0;
  6. width: 100%;
  7. }

This simply tells the iframe to fill the container we've placed it in. And that's pretty much all there is to it. This works for the embed element as well. If you have content contributors that will be embedding video, you can configure TinyMCE + WYSIWYG module to allow them to apply the class you have defined to the <p> tag so that the video doesn't break your responsive layout once they publish.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.