Responsive embeds

This article shows examples of how to embed video and other iframes in a responsive web design and has examples with YouTube, Vimeo and Slideshare.

I found a neat little CSS trick on the A List Apart article “Creating Intrinsic Ratios for Video” and I did some experimenting with it. (Yes, I had to look up the word Intrinsic…)

The problem with embed code that you copy from websites like YouTube is that they often contain a fixed width and height in pixels. And that does not work too well in responsive designs. In a responsive design we have a container with a relative width and we want the embedded object to be relative to our container. This is not possible with all embeds as some of them insist on having a fixed width. If you encounter such embeds, the workaround is probably to move some of the code to the server side or javascript and set the width to the pixel value that you think is most appropriate. It will work, but it will not be flexible like the method shown here.

This technique is fully flexible and I have tests below with Vimeo, SlideShare and YouTube (sorry if this post took long to load…). Here are the steps to make it work.

First, you just need to remove the width/hight attributes from the embed code you get:

[code]
<!– original –>
<iframe
src="http://player.vimeo.com/video/32071937?title=0&amp;byline=0&amp;portrait=0"
width="400"
height="225"
frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<!– removed width/height –>
<iframe
src="http://player.vimeo.com/video/32071937?title=0&amp;byline=0&amp;portrait=0"
frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
[/code]

Next step is to wrap this in a container tag so that we can style it:

[code]
<div class="embed-container">
<!– embed code goes here–>
</div>
[/code]

Then comes the CSS. First, we style the container:

[code]
.embed-container {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
[/code]

I’m not going to explain all this in detail, the original article does that better than I can anyway, but this code asumes a 16/9 ratio (56,25%) on the embed. Next step is to style the actual embed. Some embeds serve iframe, object or embed, based on device so we style all three:

[code]
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/code]

That’s it. Here are some examples:

Vimeo example

[code]
<div class="embed-container">
<iframe
src="http://player.vimeo.com/video/22669590?title=0&amp;byline=0&amp;portrait=0"
frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>
[/code]

Youtube example

[code]
<div class="embed-container">
<iframe
src="http://www.youtube.com/embed/TFWDUsvLCoE"
frameborder="0">
</iframe>
</div>
[/code]

Slideshare example

[code]
<div class="embed-container">
<iframe
src="http://www.slideshare.net/slideshow/embed_code/1488558"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no">
</iframe>
</div>
[/code]

PS. There is a jQuery plugin that does the work for you called FitVids.js, but this is so simple and works without JavaScript, so I do not see why we should bring on a JS library in order to get it to work.

UDPATE: I have tested the technique on a few mobile devices, and the technique works good, but the content inside the embed does not work too good… Read more here

UPDATE 2: I have created a fallback solution for devices that does not support the embed by using server side techniques: Responsive embeds + RESS

Published by

Anders M. Andersen

Digital Project Manager and Front End Developer.

  • Jaakko Karhu

    I’m having a small problem with this, could you possibly help me out. I’m having a scss like this:

    .content-media {

    width: 100%;
    height: auto;

    .video-holder {

    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;

    iframe,
    object,
    embed {

    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    }

    The video is supposed to be 100% of the smart phone screen. On iOS this works fine, but on Android at turning from landscape to portrait the iframe width doesn’t change.

    Then there is another problem with Vimeo embed: it keeps pushing the screen boundaries so the video expands the whole div. And this happens pixel by pixel and always when scrolling. Any idea, what might cause this?

  • http://www.linkedin.com/in/laurasbenson/ Laura

    Wow thanks!!! I spent a whole day messing with this and trying many different techniques. Yours is the only one that worked right away :) Removing the height and width from the embed code makes SO much sense….now is there a way to remove the black bar from the top and bottom? This is my code:

    .embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    -ms-transition:opacity 1s;
    -o-transition:opacity 1s;
    transition:opacity 1s

    }

    .embed-container:hover {opacity:0.7}

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    —————— my html

  • http://www.linkedin.com/in/laurasbenson/ Laura

    Sweet! That is the fix that I needed!!!!!

  • http://www.linkedin.com/in/laurasbenson/ Laura

    I found the solution…I set the IE6 fix to padding-top: 0px and that did the trick!!!!

  • http://www.techjunctionplace.in Sagar Nandwani

    I am trying to create a responsive iframe such as ifa page is opened in mobile it should detect the width and height of mobile browser and takes it dimension.
    For the width i got the solution as width=”100%” but for height i am not able to get solution. Please help .

  • staco

    Hello, I please would like to know if your embed player works on phone or iPad. And what is the code you typed :)

  • Dennis Galloway

    Had no idea what I was doing when I started, followed the instruction above, bam! first time – got it to work….even tried viewing it on my iPhone ….going to try this on a Google map too….this is awesome…excellent job…

  • Tracy

    It works like a charm for my youtube video! Thank you so much. (:

  • jacbizer Martinez

    hello, can you help me how to make this embeded page to be responsive…it’s so difficult…

  • Piratehouse
  • http://jombizz.com Shahreen

    Its work?

  • Hunaid Jamali

    Thank you so much! However I would also like to display a button at the bottom of the page.

    Your input will be a great help!

    Once again thank you!

  • Hans G N Andersen

    I get same problem as eshelar: the size is the same no matter the screen. Any way to use media query so that shrinking only happens below certain frame size like mobile screen?

  • http://www.seriouslyspain.com/ Seriously Spain

    Didn’t work for me at all. Sorry.

  • http://virkeligheden.dk Anders Colding-Jørgensen

    Worked in 2 minutes. Thank you!

  • thejohnsmith

    Make sure to use your width and height to calculate the bottom padding.
    height ÷ width × 100
    150 / 300 * 100 = 50
    padding-bottom:50%;

  • Pingback: Make Getty Embeds Responsive | Adrian Roselli()