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.

Har du någonsin funderat på orsaken bakom förekomsten av minimum och maximum satsningar? Sanningen är enkel: kasinon vill ha dina pengar. Så enkelt som det.

UPDATE 0: läs mer www.maximal-bonus.com.

UDPATE 1: 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.

  • I like this, no javascript needed!

  • Nice! Add a Flattr button and I’ll be extra generous this Pay a Blogger day.

  • Nice! Add a Flattr button and I’ll be extra generous this Pay a Blogger day.

  • Nice! Add a Flattr button and I’ll be extra generous this Pay a Blogger day.

  • Thanks! I’m new to Flattr, but I actually added the button now. And I will head out to Flattr some other good blogs myself now ;-)

  • There you go, good sir. :)

  • Interesting. I’ll have to play with this. I was doing a responsive site with youtube embeds and had to use javascript to resize the container div according to the video ratio to remove the “black bars” that pad the video. I also had to take the menu bar height into consideration because i believe it is a different size depending on the player.

  • Pingback: Responsive embeds – device testing – Anders M. Andersen()

  • Pingback: How to Scale Embedded Media in Responsive Designs | t3knoDorKs()

  • Lawrence Botha

    Excellent work, Anders, using this on a site we should have up in the next couple months!

    Will also be using it for responsive speakerdeck presentations!

  • Mike

    Youtube doesnt seem to be working anymore on iPhone. Whenever I click on the video it just doesnt open. Tried this on multiple iPhones, on a video of mine, and also on this page. Any ideas?

  • Hi Mike,

    The only thing I can say is that is probably a YouTube problem. The iframe is self contained and the CSS trick I provided does not interfere with the iframe in any way. It could be a Javascript problem or a YouTube permission problem (I think they block some content for some countries).

    And I just tested on my iPhone and it works so not sure I can help you out…

    -Anders

  • Anonymous

    I’m also using that technique to embed Youtube videos and works brilliantly. A year ago I developed a WordPress plugin called “Youtube shortcode” to embed Youtube videos and recently I added this technique for responsive designs.
    I suggest you visit the plugin website (docs & demos for the plugin): http://www.margenn.com/tubal/youtube_shortcode/

  • Pingback: How to Scale Embedded Media in Responsive Designs | LoQuor IT – Chicago Integrated IT Solutions()

  • you’re the man. thank you.

  • Pingback: ResponsiveDesigns by paulonpearltrees - Pearltrees()

  • Pingback: Easy steps to a mobile-friendly responsive design with an embedded YouTube video with a fluid resize - Scott Hanselman()

  • Pingback: Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize - Scott Hanselman()

  • Pingback: Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize « Fast Ninja Blog by Freelanceful – Web Design | Coding | Freelancing()

  • Kurt

    Thanks Anders! You helped me wrap up a project!

  • Glad to hear that!

  • hey great one thx for sharing….

    you are the man…

  • EC Brown

    Just implemented this. Works like a charm!
    Thank you!

  • Mail

    thx for the tip !

  • Newnoo_19

    Thanks for this, really useful, clever idea to force the aspect ratio!

  • Thanks for this post, I was actually trying to implement SlideShare embed in a responsive design when I stumbled over your post. Even though I think that my solution would be more or less the same as yours in the end your post saved me some time! :-)

  • Adamball

    Thanks for the help. Just one thing that i cannot get to work. The youtube box on my website is now to small… is there any code that can sort this out .. Thank you in advance

    Adam

  • jk

    Is it possible to embed a responsive vimeo video into wordpress and get auto play and no black bars over and under the video if it panoramic?

  • jk

    Is it possible to embed a responsive vimeo video into wordpress and get auto play and no black bars over and under the video if it panoramic?

  • You should be able to change the

    padding-bottom: 56.25%; /* 16/9 ratio */

    part to fit your aspect ratio. There is nothing here that detects the aspect ratio of the video though so you need to know it up front.

  • ORBITEC sc

    una solución simple y poderosa, solo con CSS´s thanks you so much!!!

  • Sii

    Hi Anders,

    Why does your slide share example show that the content is unavailable on an iPhone?

    Have you ever noticed a problem with the iframe content shifting to the right on device orientation change? In particular, after swiping / playing the content.

  • Great little trick, I’m using this technique in multiple projects. Thanks for the insight!

  • Peiftronica

    This is a useful post for developers who have static embed code that will appear autonomously on the page. If you have hands-on access to the embed code you’re trying to manipulate, this is a great solution.

    That being said, I think FitVid.js would be a better solution if anything about the embed is dynamic, i.e. iframe is delivered via AJAX *already containing* the embed code, which can have height/width attributes already set (as in your example) OR the HTML within the iframe may have inline styles, which your CSS won’t affect because of the DOM structure.

    iFrames are ugly because of this DOM issue, and that’s why developers should rely on other alternatives whenever possible (IMHO). Even though a little javascript is all you need to dig through the DOM and access the iframe and it’s contents, that javascript is rarely pretty, and you’ll run into same-origin and permission issues when you’re bringing in content from another domain.

    And, both processes are a means to the same end, because the end result with JS will be the same: you’ll use JS to dig into the iframe, use JS to remove alt attributes, and then use JS to apply CSS styling to the contents of the iframe. If you can solve your problem just by wrapping the iframe with a div and then styling the iframe itself, that’s awesome. This is rarely the case with dynamic content embeds though.

  • Anders, thank you. This code is working a dream for me.

    I wonder if you’ve had any experience using it with TED video embeds? I’ve stripped out any fixed dimensions and wrapped it the same as you have here, but whilst the width responds the height doesn’t… at least for me.

    Thanks again.

  • Surjith SM

    Hi, Please note one issue. First the page is loading in potrait mode (i’m using galaxy s ), its working fine. if i changed to landscape mode, its fine. then im again returning to Potrait mode. THE VIDEO WIDTH REMAINS SAME. And the page get Scroll on both side.

    Can you fix this one.. it will be very helpful. Bcoz Our Testers Marked this as Bug.

  • Balauue

    Thank You so much! This also works for embeded google maps!

  • derekk pan

    You awesooome.. thank you :)

  • Shari

    Tack så mycket — funkar jättebra! :)

    Shari

  • Thanks!!! This post saved me a LOT of heartache on a Sunday evening, before a Monday morning launch. Brilliant, thanks again.

  • Mr Ross

    This is the problem I am getting on Android :(

  • Pingback: Responsive images – how to prevent reflow : Anders M. Andersen()

  • Pingback: Responsive images – lazy load and multiserve images : Anders M. Andersen()

  • Brilliant – tack så mycket!

  • I made a compass extension to reuse this easily : https://github.com/msadouni/compass-responsive-embeds

  • Little Chic Geek

    Hi! – Newbie here,

    I tried adding the codes myself and it didn’t work for me. But my question is, does the web site itself also have to be responsive? If that’s the case, then I would understand why the code isn’t working on my end.

    Thanks,

    Lil Chic Geek

  • Lil Chic Geek

    You know what nevermind, I just reread your post and figured out that the iframe I’m working with won’t work.

    Thanks.

  • Dan Tashman

    Great tip. Cheers!

  • Dan Tashman

    Great tip. Cheers!

  • victor_widell

    Awesome! Works like a charm.

    I should mention that the IE6 workaround causes a black border at the top and bottom, but I don’t support IE6 anyway, so I just removed it.