Responsive embeds

November 28, 2011

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:

<!-- 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>

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

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

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

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

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:

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

That’s it. Here are some examples:

Vimeo example

<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>

Youtube example

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

Slideshare example

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

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

Tags:, , , , , , ,

Categorised in: ,

Written by Anders M. Andersen

  • http://twitter.com/aloysiusbe VP

    you rock– love pure css techniques

  • http://twitter.com/aloysiusbe VP

    you rock– love pure css techniques

  • bob

    Thanks. That’s awesome.

  • bob

    Thanks. That’s awesome.

  • camsjams

    This doesn’t work on the latest version of Firefox, or pretty much any of them after about 13. Has anyone figured out a solution for FF?

  • bob

    Works for me on FF 17 and 16. I haven’t tested it on other versions of FF, but it should work fine.

  • camsjams

    May I ask what platform – I am on Windows 7, Firefox 17, Flash 11.3.

    You’re not getting the issue where the browser window cannot be resized without the “stutter” or “stuck size” issue?

  • bob

    FF on linux. Flash version 11.2

    I haven’t done any IE testing on the site for which I’m using this technique. I’ll be doing this later today.

  • camsjams

    Ah I found it – it seems that this issue only occurs in Firefox with Flash 11.3. I upgraded to 11.5 and it works correctly now.

  • camsjams

    Ah I found it – it seems that this issue only occurs in Firefox with Flash 11.3. I upgraded to 11.5 and it works correctly now.

  • Mariosa.it

    Thanks a lot. Perfect instructions!

  • Mariosa.it

    Thanks a lot. Perfect instructions!

  • Duncan

    Superb article, you made this dead simple to follow. Big ups!

  • Duncan

    Superb article, you made this dead simple to follow. Big ups!

  • http://twitter.com/LouLouGarcia Louis Garcia

    Thanks for the great examples!

  • http://twitter.com/LouLouGarcia Louis Garcia

    Thanks for the great examples!

  • http://twitter.com/jayrizzi1 Jay Rizzi

    really incredible, thank you, bailed me out on a google calendar embed i couldnt figure out

  • http://twitter.com/jayrizzi1 Jay Rizzi

    really incredible, thank you for bailing me out of a google calendar embed I was banging my head with

  • Pingback: Responsive web design e oggetti multimediali | Arch. Mattia Frigeri

  • Chris

    Silly question, but would if I wanted to take up only 80% of the screen and wanted it centered?

    The easy answer is to put a dive around it and center the div, but this is not working for me. Any thoughts?

    Chris

  • eschelar

    Didn’t work for me. All videos were 300×150 due to having removed the width and height. I tried a few other ways of adding width and height, but no deal.

    Oddly, the code works ok when I view this page.

    I’m using Joomla and Yootheme.

  • http://avantgardian.org/ AndrewAvantgardian

    I’m going to try your approach, thanks!

  • Polgara

    You are a rock star, thanks so much!

  • C Veloper

    FitVIds is a great plugin, works brilliantly with SlideShare (using the customize option) – great job #Davatron5000

  • Ryan

    Doesn’t work for me on FF23, Mountain Lion.

  • camsjams

    what version of Flash do you have?

  • Jesudas Nadar

    Its great fix, working all desktop browser but For andriond and IOS browser its not working as expected its still show big in the wrapper

  • http://leaves-and-love.net/ Felix Arntz

    I think it’s important to say that this styling is not only useful for videos. Images (from providers like Instagram or Flickr) as well as audio from things like Soundcloud and Spotify should also be embedded like this. With additional aspect ratios like 3:2 (many images have this ratio), 3:1 (looks nice on single audio tracks of most platforms) or even something like 5:6 (I found this is a good choice for audio playlists) this can be managed.

    Based on this article, I made a WordPress plugin “Responsive Video Shortcodes” that uses the oEmbed feature included by WordPress to display videos (and also other media) in a responsive manner.

    http://wordpress.org/plugins/responsive-video-shortcodes/

  • mgulaid

    Thanks Dude! it works like a charm!

  • http://www.about.me/mattauckland Matt Auckland

    Excellent code, thanks. Works like a charm across 4 different browsers on Windows and Mac, plus iPhone as well. I’ve baked it into my blogging platform I’m building, and it’s currently live on my test blog running a basic Twitter Bootstrap theme @ hello.djbook.co

    Not sure how like I’ll have the test post up.

  • shopMAGES.com

    Nice trick, I hope to use it on our site http://www.shopMAGES.com. We have a problems with proper scaling in responsive template – thanks so much

    Paul

  • tpurcell

    it worked very well!

  • Bossman

    I didn’t even realize this was an issue until I started testing my site on my phone. Thanks for putting up this page. I actually ended up using the FitVids plugin for my wordpress site http://bossmemo.com. It ended up providing me the full 16:9 ratio for the body of my site while maintaining scale on my mobile version.

  • TVD

    What do you do with 4:3? Just replace 16:9 with 4:3 in the code? I’m having troubles with WordPress not allowing html. It just strips it out as soon as you add it. All I can do is post the link in the visual editor. No share buttons either. They don’t work in WordPress. WordPress will just delete them. What I can do with that link is wrap it with [embed] and [/embed] and add height and width attributes. I used to like WordPress. Any ideas?

  • TVD

    If you drop dead tomorrow, will this plugin still be good for 4 or 5 decades and a couple thousand WP updates? Otherwise, I run from plugins.

  • Bruno Renato Viana

    Thank You so much!

  • Sharath

    Thanks for this!

  • http://2kob.com/ Douglas Vautour

    Thank you very much for this! Works with embedit pro on wordpress!

  • theazn

    worked for me thanks!!!!!

  • JDwilliams21

    Mr. Andersen!!!!! Thank you so bleeping much…. I’m not a html guy but the lack of funds is turning me into some one who has to consistently research alternatives and and figure out ways to solve my on problems….Over time i am becoming more and more familiar with the code… and you just saved my whole site….not gonna babble much but thank you thank you thank you!!!!!!!!

  • JaeK

    I can’t get mine to center? how do you put the above code into effect, but get it to automatically center?

  • JaeK

    I can’t get mine to center? how do you put the above code into effect, but get it to automatically center?

  • tinsrong

    thank you

  • tinsrong

    thank you

  • http://www.danielfrank.dk Daniel Frank

    This helped me with me Mixcloud embedding. Thanks a lot!

  • http://beenthinkn.wordpress.com/ Don Henderson

    Worked like a charm… Thanks very much.

  • http://www.thelle.dk/ Thelle Hedegaard Kristensen

    Anyone who has got the code needed for Ustream?

© 2014 Copyright.