Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Making Embedded Content Work In Responsive Design

A few HTML elements don’t play nice with responsive layouts1. One of these is the good ol’ iframe, which you may need to use when embedding content from external sources such as YouTube.

In this article, we’ll show you how to make embedded content responsive using CSS, so that content such as video and calendars resize with the browser’s viewport. For those occasions when non-coders will be embedding video on your website and you don’t want to rely on them adding extra markup, we’ll also look at a solution that uses JavaScript instead of CSS. You can see a demo of these techniques2 on my blog.

Further Reading on SmashingMag: Link

Note: This technique was originally detailed in Thierry Koblenz’s excellent tutorial ‘Creating Intrinsic Ratios for Video7‘. I’ve used techniques I learned from his tutorial and expanded on them here for additional content types such as calendars.

The Markup For Embedded Content Link

Services such as YouTube provide code that you can copy and paste into your own website to embed content. I tend to recommend to my clients that they host video with YouTube because it will save them server space and, regardless of the user’s browser or device, YouTube will display the video correctly. The two main ways to embed video on a website are the HTML5 video element, which doesn’t work in legacy versions of Internet Explorer, and Flash, which doesn’t work on iOS devices and isn’t standards-compliant.

When you embed content from an external source, the code will include an iframe:

<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>

This iframe enables external content to be displayed on your website, because it includes a URL that points to the source of the streamed content.

However, you’ll notice that our iframe includes width and height attributes. Remove these and the iframe will disappear because it would have no dimensions. And you can’t fix this in your style sheet, unfortunately.

The width attribute means that, on a screen narrower than 560 pixels, the embedded content will protrude outside of its containing element, breaking the layout. In the example below, I’ve added the code above to a page of my blog. The screenshot is taken from an iPhone in portrait mode (320 pixels wide), and the rest of the page has been shrunk so that the embedded content fits the screen. Far from ideal!

Video breaks the layout in a responsive website on iPhone8
Screenshot taken from an iPhone in portrait mode (320px wide). (Larger view9)

Fortunately, there is a way around this using CSS. First, I’ll show you how to do this with embedded video, and then with calendars.

Responsive Video Link

The Markup Link

To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:

<div>
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

The next step is to add styling to this new wrapper and the iframe within it.

The CSS Link

First, we style the containing wrapper with the .video-container class. As proposed by Thierry Koblentz10 in his ALA article “Creating Intrinsic Ratios For Video”11, we can use the following snippet in our style sheet:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

This does a few things:

  • Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
  • The padding-bottom value is calculated out of the aspect ratio of the video. In this case, the aspect ratio is 16:9, which means that the height will be 56.25% of the width. For a video with a 4:3 aspect ratio, we set padding-bottom to 75%.
  • The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.
  • The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.
  • Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.

We also need to style the iframe itself. Add the following to your style sheet:

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

This targets iframes inside containers with the .video-container class. Let’s work through the code:

  • Absolute positioning is used because the containing element has a height of 0. If the iframe were positioned normally, we would have given it a height of 0 as well.
  • The top and left properties position the iframe correctly in the containing element.
  • The width and height properties ensure that the video takes up 100% of the space used by the containing element (which is actually set with padding).

Having done this, the video will now resize with the screen’s width. Here’s how it will look on a desktop:

Responsive video as seen on the desktop (in the flow of the content, fitting nicely)12
Desktop screenshot of the video resizing the screen’s width. (Larger view13)

And here’s how it will look on a screen that is 320 pixels wide:

Responsive video fits into the layout on a 320px wide screen14
The video on a 320 pixels wide screen. (Larger view15)

Let’s move on to other sources of embedded content — specifically, Google calendars.

Responsive Calendar Link

The Markup Link

The CSS to make any form of embedded content responsive is essentially the same, but different content will have different aspect ratios, which means you’ll need to set the padding-bottom value accordingly.

Below is a screenshot of a website that I manage for a primary school, a website that embeds a Google calendar. As you can see, the calendar breaks the layout on a small screen. In this case, the website is displayed at the correct width, but the calendar goes beyond the screen’s width.

A celandar as seen on a responsive website on an iPhone - not all of the calendar is visible16
The calendar breaks the layout on a small screen. (Larger view17)

The markup for the embedded calendar is as follows:

<iframe src="https://www.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&amp;color=%232952A3&amp;ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>

To make a calendar responsive, add a div with a class of .calendar-container to contain the iframe:

<div>
    <iframe src="https://www.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&amp;color=%232952A3&amp;ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no">
    </iframe>
</div>

The next step is to style this div.

The CSS Link

The CSS for a calendar is almost identical to the CSS for a video, with two exceptions: The aspect ratio will be different, and padding-top isn’t needed.

Add the following to your style sheet:

.calendar-container {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

In this case, the iframe is 800 pixels wide and 600 pixels high, which gives us an aspect ratio of 4:3. So, set padding-bottom to be 75%.

Having done this, we need to apply the same styling to the iframe element in this new container:

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

This is exactly the same styling that we applied to the video.

Now, the calendar will resize with the browser window, as shown here in Opera Mobile on an Android phone:

A responsive calendar fits into the width of a 320px wide screen

As long as you remember to wrap your embedded calendars and videos with the appropriate containing element, then this CSS will work for any new videos and calendars that you add to your website.

The problem, however, is that although you can fit the whole calendar on a page, it’s still almost unusable because click targets are so small and no information is visible. If you absolutely have to display Google Calendar, you can, but if you can use more usable responsive calendar solutions like simple CSS (setting display: block on table rows, for example), or w3widgets Responsive calendar18 or Calendario19 for your own calendars, your users might appreciate it.

Responsive Video With CSS or JavaScript Link

If you’re developing a responsive website using a content management system, then one or more of the website’s editors will probably have to embed video at some point. You can point your editors to EmbedResponsively.com20 which generates responsive <embed> codes for embedding rich third-party media with one click, with CSS alone. Alternatively, you could use a JavaScript solution, to relieve nervous editors from having to add extra CSS and markup. However, as long as you can avoid this path, the better, of course.

Until recently, most solutions were plugins, which are OK to an extent but can have performance issues. A popular plugin is FitVids.js21, developed by Chris Coyier and Paravel.

A more current solution is to use just a script — such as FluidVids.js22, developed by Todd Motto. FluidVids.js is simple to use23:

  1. Download the script24 (ZIP) from GitHub and upload it to your server with the same folder structure that the downloaded files come in. This will place the script itself in a folder named dist.
  2. Call the script in each page’s <head> section with the following code:
<script src="dist/fluidvids.js></script>

That’s all you need to do to make videos resize on all devices that support JavaScript. It works not only for YouTube, but for Vimeo, too. The problem, however, is that if you users don’t have JavaScript support or the JavaScript hasn’t loaded yet or JavaScript hasn’t loaded correctly, the only fallback you can use is to add the following to your style sheet:

iframe {
    max-width: 100%; 
}

This will ensure that video resizes to the width of the browser’s window. But it won’t resize the video’s height; unfortunately, iframe just doesn’t work this way. So, the video won’t break your layout, but it won’t look very good either. This is not really a good option, so if you can avoid using JavaScript for videos, it’s a good idea to do so.

Responsive Google Maps Link

Apart from videos and calendars, another common issue is the embedding of Google maps, responsively. Basically, we again use the same intrinsic ratio technique, and when setting padding-bottom for the wrapper, we just divide the height by width and add the aspect ratio in CSS.

Usually, the code generated by Google Maps would look like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.260812859955!2d-73.990184!3d40.756288!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb134c693ac14a04c!2sThe+TimesCenter!5e0!3m2!1sen!2suk!4v1393485725496" width="500" height="450" frameborder="0" style="border:0"></iframe>

We just wrap a div around the iframe and apply the familiar CSS styling to it:

.google-maps {
    position: relative;
    padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

And this is what the markup will look like:

<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="500" height="450" frameborder="0" style="border:0"></iframe>
</div>

Voilá! Again, we can just use EmbedResponsively25 to generate the copy-paste-code with one click.

Summary Link

Embedded content has a habit of breaking responsive layouts, because it’s contained in an iframe with a fixed width. In this article, we’ve seen how to add a single containing wrapper, and some CSS, to ensure that all embedded content contained in an iframe resizes with the browser’s window.

Sometimes it’s good enough, but sometimes you might need to come up with more advanced solutions, since resizing isn’t always a solution. We’ve also looked at embed code generators and alternative solutions, using JavaScript, which might be necessary in some cases, especially if editors have to deal with many videos and don’t have technical skills required, or CMS doesn’t allow for inline styling26.

How do you embed third-party content on your responsive websites? Have you discovered any particular tricks or techniques? What does your workflow for embedding such content look like?

(al, vf, il)

Front page image credits: Juhan Sonin27.

Footnotes Link

  1. 1 https://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
  2. 2 http://rachelmccollin.co.uk/blog/responsive-iframes/
  3. 3 https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
  4. 4 https://www.smashingmagazine.com/2013/05/the-state-of-responsive-web-design/
  5. 5 https://www.smashingmagazine.com/2012/11/embeddable-content-wordpress/
  6. 6 https://www.smashingmagazine.com/2016/09/content-security-policy-your-future-best-friend/
  7. 7 http://alistapart.com/article/creating-intrinsic-ratios-for-video
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2014/02/01-non-responsive-video-large.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2014/02/01-non-responsive-video.png
  10. 10 https://twitter.com/thierrykoblentz
  11. 11 http://alistapart.com/article/creating-intrinsic-ratios-for-video/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2014/02/02-desktop-video-after-large.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2014/02/02-desktop-video-after-large.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2014/02/03-responsive-video-iphone-large.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2014/02/03-responsive-video-iphone-large.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2014/02/04-non-responsive-calendar-large.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2014/02/04-non-responsive-calendar-large.png
  18. 18 http://w3widgets.com/responsive-calendar/
  19. 19 http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/
  20. 20 http://embedresponsively.com/
  21. 21 http://fitvidsjs.com
  22. 22 http://toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/
  23. 23 http://gomakethings.com/using-fluidvids-js/
  24. 24 http://github.com/toddmotto/fluidvids/archive/master.zip
  25. 25 http://embedresponsively.com/
  26. 26 https://www.smashingmagazine.com/2015/08/understanding-critical-css/
  27. 27 http://www.flickr.com/photos/juhansonin/8142671926/

↑ Back to top Tweet itShare on Facebook

Rachel is a freelance web designer and writer specialising in mobile and responsive WordPress development. She's the author of 'Mobile WordPress Development', a comprehensive guide to making yourWordPress site mobile-friendly, published by Packt, and also author of 'WordPress Pushing the Limits', published by Wiley.

  1. 1

    Such a simple hack, makes all the difference.

    Wasn’t aware of this but will definitely be considering this for responsive embeds in the future. Much thanks.

    8
  2. 2

    I know this solution and used it once. But isn’t it also possible to just give the iframe the styles of the outer div and use classes for the padding-bottom? Like this:
    iframe.responsive {
    position: relative;
    height: 0;
    overflow: hidden;
    }
    iframe.responsive.google-maps {
    padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)
    }
    iframe.responsive.video_16_9 {
    padding-bottom: 56.25%;
    }
    iframe.responsive.video_4_3 {
    padding-bottom: 75%;
    }

    Then just use:
    <iframe class="responsive google-maps" ...>
    <iframe class="responsive video_16_9" ... >
    <iframe class="responsive video_4_3" ... >

    Haven’t tried it out here right now but I guess it should also work.

    0
    • 3

      Guy Williams

      April 22, 2014 2:11 pm

      Thank you for your post…I was having a devil of a time trying to get an IFRAME google map in a jquery mobile application to be ‘responsive’…and thought I’d have to re-write a ton of code…your post on setting the IFRAME to class=”responsive google-maps”, with the associated style code did the trick!

      Thanks!

      Guy Williams

      1
  3. 4

    With the Youtube iFrame I’ve set the width within the element itself to 100% with no CSS or wrappers, this makes it fit to the screen. Am I missing something?

    <iframe width="100%" height="480" src="http://www.youtube.com/embed/cYQyJGVwNPw?rel=0" frameborder="0">

    6
    • 5

      This is what I use as well. If you set the iFrame width to 100% and leave the height attribute out it maintains the aspect & resizes perfectly, no problem.
      What’s with all the extra code?

      2
      • 6

        The biggest benefit I can think of is that the space is saved for the video as your browser loads the page before the video component is downloaded. This gives the feeling of the page loading faster because you avoid layout re-calculation as elements download.
        But, depending on the website, I would also strongly consider using 100% instead like you are suggesting.

        0
    • 7

      Using your technique, the height never changes. The whole point of the technique described in this article is to scale the height to change in function of the width. Using your technique, a smaller viewport will display the video too tall; a large one would display it too wide.

      2
    • 8

      Thanks for this suggestion Lauren, it worked well for me. I’m not great with code so your simple tip was very helpful. As for the height issue, I adjusted the height according to how it looked on the mobile version first and then made it work on desk top.

      Kudos :)

      0
  4. 9

    Francesco Spreafico

    February 27, 2014 2:55 am

    I’ve been using this tecnhique for some time now… it works beautifully.

    It’s a good thing to give it visibility, so that more and more people learn about it and start using it.

    0
  5. 10

    Davide De Maestri

    February 27, 2014 4:16 am

    The CSS trick is really nice, but if used on a CMS (for example) we have to add a div before iframe dynamically (by JS) or handmade every time. I hope in a better solution for future :(

    0
    • 11

      This is true to a certain extent, but the above solution could be implemented in a different way when using a CMS.

      I’ll use WordPress for example – you could write a little short code (for use within the standard WP editor) that would automagically insert the wrap around div for you, plus the internal iframe. All you’d need to supply would be the URL. There are many existing examples/plugins that do this for Google Maps & Calendars.

      0
    • 13

      It’s a very simple bit of script though… Something I’ve been using a while now. Here’s an example from a dynamic testimonial page on a site I’ve done where the client can add an image, text, video or a combination. Image are handled through the css but this ensures the video is always responsive.

      if ($(“.testimonial iframe”).length) {
      $(“.testimonial iframe”).each(function () {
      $(this).wrap(“”);
      });
      };

      -1
  6. 14

    Hi,
    Did you have a fix for Facebook comments iframe box?
    https://developers.facebook.com/docs/plugins/comments/

    0
  7. 18

    I’ve been using this technique on my blog for some time now. I recommend making use of a [data-*] attribute so that you can specify the aspect ratio within the attribute:

    <div data-aspect-ratio="4:3">
    <div>...</div>
    </div>

    0
  8. 19

    Dynamically generate the correct aspect ratio and inject it into the CSS.

    CSS:

    .vidwrap {
    position: relative;
    padding-top:0; /* Add in 30px for Youtube chrome */
    padding-bottom: 0%; /* Changes to match aspect ratio of iframe, see jquery */
    height: 0;
    overflow: hidden;
    }
    .vidwrap iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    .vidoverlay {
    position:absolute;
    top:0;
    left:0;
    padding-bottom: 0%; /* Changes to match aspect ratio of iframe, see jquery */
    width:100%;
    background:black; /* Change overlay color */
    opacity:0; /* Change overlay opacity */
    }

    JQuery:

    var vidWidth = $('.vidwrap iframe').attr('width'),
    vidHeight = $('.vidwrap iframe').attr('height'),
    decimal = (((vidHeight/vidWidth).toFixed(4))*100).toFixed(2),
    percent = decimal + '%';
    $('.vidwrap').css({paddingBottom:percent});
    $('.vidoverlay').css({paddingBottom:percent});

    Here’s the jsfiddle: http://jsfiddle.net/Buttonpresser/R4W9m/

    1
  9. 20

    or just use this simple jQuery script to determine the aspect ratio and then inject it into the CSS:

    var vidWidth = $(‘.vidwrap iframe’).attr(‘width’),
    vidHeight = $(‘.vidwrap iframe’).attr(‘height’),
    decimal = (((vidHeight/vidWidth).toFixed(4))*100).toFixed(2),
    percent = decimal + ‘%’;
    $(‘.vidwrap’).css({paddingBottom:percent});

    2
  10. 21

    I’ve started using SUIT FlexEmbed which uses the same type of approach. Works great!
    https://github.com/suitcss/components-flex-embed

    0
  11. 22

    Amazing stuff, all the embedded code are great….I would be keen to use google web facilities…

    Thanks,
    tfwebdesign

    -5
  12. 23

    The YouTube chrome height seems to be based on the old ALA article from 2009 (!). Currently it has a 35px height.

    /* Chrome height of YouTube bottom controls */
    .video-container.youtube {
    padding-top: 35px;
    }

    This in turn is doubled when having the autohide parameter enabled.

    /* Chrome height of YouTube: top banner and bottom controls when autohide=1 */
    .video-container.youtube.autohide {
    padding-top: 70px;
    }

    1
  13. 24

    I have used percentage top padding and absolute positioning for responsive elements, especially sliders, but I never thought of applying that to iframes. With WordPress, it wouldn’t be too hard to filter oEmbed and add the necessary markup and classes for the CSS solution. There are probably already plugins that do this.

    Also, here’s a gist I wrote for a quick and dirty javascript solution that calculates the aspect ratio and resizes the width and height of an iframe according to it’s container: https://gist.github.com/tammyhart/6199503

    0
  14. 25

    What about ads (I am talking about those single-image-ads with nested table-markup and iframes and shit that don’t resize)? Is there a way to resize them by applying transforms?

    0
  15. 26

    I have been using this method and it works wonders for me.
    Thanks for sharing.

    Mark,

    0
  16. 27

    Why not using a simple max-width : 100% on iframes ?

    0
  17. 28

    Just wondering, setting a div to 100% width and 100% height, does that actually really work for old IE browsers?

    I once had some issues, I think it was with the height.. since then, when I need to make a div stretch a full page, I just use javascript.. but also when there is a window resize, and that seems pretty “heavy” to use :/

    0
  18. 29

    Arianna Decosta

    March 3, 2014 9:54 pm

    Hey Rachel,

    I learned a lot of things here. I am developing a Parallax website and there is some issue in the design because of there less space for the content. I will implement the above tips on my website.
    Thanks a lot to share your experience with us.

    0
  19. 30

    Kiran Reddy

    March 5, 2014 6:13 am

    If we have 2 or more youtube videos in a single page, how to use it. I tried with above code but both videos are overlapping. Any suggestions.

    0
  20. 31

    Nicolas Lachance

    March 6, 2014 5:39 am

    Awesome trick! Many thanks for sharing! Will help me tremendously in making our next product fully responsive.

    -1
  21. 32

    Andrew Zimmerman

    March 7, 2014 10:06 am

    Been using this approach for a while thanks to ALA.

    Is there a method of having something similar work for image maps? I can only get image maps to work when the image is displayed at its native dimensions.

    Client insisted on an image map solution. I’d like it to work on a variety of screen resolutions, but can’t figure out how to do that.

    0
  22. 33

    Thanks for the great article. I am doing a probono website for our local humane society and even after reading this tutorial I am still having trouble.

    I added this to my stylesheet

    .adopt-container {
    position: relative;
    padding-bottom: 87%;
    padding-top: 0px; height: 0; overflow: hidden;
    }
    .adopt-container iframe,
    .adopt-container object,
    .adopt-container embed {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    Website: elkharthumanesociety.org/adopt/

    What am I doing wrong?

    0
  23. 34

    This technique was first published by Thierry Koblentz in A List Apart nearly 5 years ago.

    http://alistapart.com/article/creating-intrinsic-ratios-for-video/

    1
  24. 35

    Sasha Endoh

    April 4, 2014 8:55 am

    Thanks so much for describing this technique! I’ve found it super useful in a recent project that asked for embedding of Google calendars, spreadsheets and forms. I just wanted to note that while this is perfectly responsive, mobile webkit browsers would benefit from adding the momentum scrolling property back to the div containing your embedded content if, for example, you’re embedding a Google form that would have a scroll bar on desktop and other mobile devices (for example Kindle fire displays these scroll-bars without any extra tweaks). Chris Coyier describes this on his website but in short adding the following code within your mobile media queries does the trick:

    .form-container {
    overflow-y: scroll; /* has to be scroll, not auto or hidden*/
    -webkit-overflow-scrolling: touch;}

    Thanks again for the very userful article!

    1
  25. 36

    Thanks for this code! Is there any way to keep the video from going full screen on desktop computers? I’d like video to show up as the correct 560×315 size on my desktop monitor (not full screen) and then just SHRINK for mobile devices.

    Thanks!

    -1
  26. 37

    Thanks a lot. I can’t believe it’s working… I won’t need a third coffee trying to figure it out by myself.
    Thanks, really!

    0
  27. 38

    This worked perfectly, thanks so much! I was totally pulling my hair out trying to get my vid to be responsive.

    0
  28. 39

    Thanks for sharing. Works great!

    0
  29. 40

    I’m trying to pull a web page in with and iframe within an Android app. Everything works well excect when scrolling it’s very glitchy. The swipe is hard to move the page up and down. I know it’s because of the iframe because when I go to it directly on my phone and not through the iframe it works fine.

    I want it to functions the same for both (No hesitating on the scroll in the iframe)

    Is there anything I can do?

    Thank you in advance for your help.

    0
  30. 41

    Thank you! This absolutely works as at the following example:
    file:///G:/SEO%20Project/index.html#moving
    Thank you very much!!

    0
  31. 42

    GRAPHIC HAVOC

    July 5, 2014 7:48 pm

    This works for desktop embeds but on iOS, there are issues with black bars appearing on the top and bottom. I’ve been unsuccessful in getting rid of them completely on iOS but have found the closest workaround solution, which I posted about here: http://ghava.tumblr.com/post/90865690328/responsive-youtube-embed-problems-with-black-bars

    0
  32. 43

    this doesn’t work at all for me. the video does not resize or change in any way

    0
    • 44

      The examples are missing: class=”video-container” and class=”calendar-container” for the video and calendar divs.

      3
      • 45

        Thanks for pointing this out. It doesn’t work if you leave out class=”video-container” or class=”calendar-container” in the div tag.

        0
  33. 46

    Johanna Ouwerling

    August 6, 2014 10:12 am

    Thanks for this! Works like a charm!

    0
  34. 47

    Twitter feeds, which don’t use has the same negative effect.
    Is there are fix for Twitter feeds?

    0
  35. 48

    Johanna Ouwerling

    August 18, 2014 6:44 am

    Hi Rachel,
    Love your code! Works great for videos.
    I also have an ecards page. I tried to use your code for it, but it doesn’t work.
    Is it possible to get this to work too in a responsive mode?
    Here is my page: patriciakaas.nl/ecards.htm

    Johanna

    0
  36. 49

    Hi,
    Could anyone help me with my iframe? I am using an iframe from StatsFS on this page – http://fanscorners.com/chelsea/squad-selector/ And on mobile the iframe doesn’t fit (it’s 510×750). Not sure which class I should use if I want to apply steps described in this post. Thanks!

    0
    • 50

      I have managed to make box responsible but the content inside is not. Am I missing something?
      I added … to my iframe. And these to CSS:

      .squad-chelsea {
      position: relative;
      padding-bottom: 147%;
      padding-top: 0px;
      height: 0;
      overflow: hidden;
      }

      .squad-chelsea iframe {
      position: absolute;
      top:0;
      left: 0;
      width: 70%;
      height: 100%;
      }

      0
  37. 51

    Thank you so much! Quick, easy and a game-changer :)

    0
  38. 52

    Great fix for video, thanks a lot!

    One note, though: on Vimeo, the margin-top values can be omitted. All the rest works fine.

    0
  39. 53

    Thanks a ton :) Really helpful :)

    0
  40. 54

    I am looking to embed the google map on squarespace and am having difficulty fixing the position of the map. I do not want the map to scroll, only the page, and on all devices (i.e. ipad, phone, cpu) Please Help!

    -Sarah

    0
  41. 55

    What CSS code do you recommend if using the old embed code from YouTube since iframes don’t get indexed by the search engines?

    0
  42. 56

    this is working fine for me in the desktop browser. however, in keynote’s iphone simulator, i see no video player at all. when i removed almost all of the tags, i was able to get the iphone simulator to render the youtube embedded iframe.. the 1st time.
    after re-applying the css and then removing it again, the player does not play at all in any circumstances in the simulator. :(
    no idea so far what the cause of this is. any tips welcomed.

    -1
  43. 57

    Holy cow thanks for this! You’re a godsend!

    0
  44. 58

    Joseph Sfrengeu

    October 13, 2014 10:03 pm

    This made lots of sense, however It only works on youtube embeded iframes. It doesn’t work on any other iframe I try (either a google docs form or christianworldmedia live stream embed)

    The only difference in my code between the responsive youtube iframe and the other non-responsive iframes is the src url. Other than that the code is verbatim and yet it only works if its been sourced from youtube.com

    Am I missing something?

    2
    • 59

      First, thanks to the OP for a clear, informative and well written post.

      I too have only been able to get this to work with YouTube videos. I attempted to embed a Google map with this code and while it successfully embedded, it is not responsive. Not sure what the issue is.

      0
  45. 60

    I’ve followed Rachel’s suggestion in the past with success embedding responsive google maps. I’ve recently come back to revisit it, though in the process discovered this great tool:

    http://embedresponsively.com/

    Won’t be the answer for everyone, however I’m sure this will help others so wanted to share it here.

    :-)

    0
  46. 61

    Insane solution! Thanks! Work like a charm!

    0
  47. 62

    Ryan Burnette

    November 5, 2014 8:58 pm

    I love solutions to responsive iframes that are pure CSS, but like some of the solutions in this post, avoiding some JavaScript isn’t always possible.

    I wrote a jQuery script that makes embedded Instagrams responsive. I racked my brain on a way to do it purely in CSS but never found one.

    0
  48. 63

    Thanks for this – really helped. I was so grateful for this that I’ve re-blogged about your article http://tappetyclick.com/blog/2014/11/13/how-make-iframes-responsive

    Chris

    0
  49. 64

    I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an nervousness over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this increase.

    -2
  50. 65

    Dora E. H. Crow

    November 25, 2014 6:33 am

    Perfect! I just used the CSS solution for Google Maps. Made a few adjustments (reduced padding on the bottom, added a max-height ) and everything looks great and responds correctly.

    Thank YOU!

    0
  51. 66

    Thanks for this – REALLY helpful as I was trying to find a solution for implementing interactive panoramic images within WordPress – and with a few adjustments to what you provided, found a very usable solution that works across all platforms I’ve tested so far – thanks so much!

    0
  52. 67

    WOW!

    I found this article on my first search and man do I feel lucky. It was exactly what I needed. I can’t say I understood any of it, but I just copied it to my style sheet and added the container and class. It just worked.

    Now I need to study it and try to understand why it worked.

    Thank you!!!!!

    0
  53. 68

    Hello,

    Does the method for embedding responsive Google Calendars still work as described above? My calendar looks fine on the computer, expands vertically (endlessly) on tablets and looks like the “before” version on the phone.

    I’ve tried your method but perhaps Google has made some changes?

    dev1.haringcenter.or

    Thanks,
    Carol

    0
  54. 69

    Question: using bootstrap 3 which has a similar solution baked in, to import a form via iframe, all works great. However is there a way to change the value of padding-bottom set on the class of .embed-responsive, once the form has submitted and returned a Thank You notice. As it stands once the form has submitted the iframe and there fore the page it is in, is left with loads of space which was previously occupied by the form. There maybe other ajax solutions etc, but for now I am stuck using an iframe, is it possible at all to determine the padding of the containing div based on a condition within the iframe. Ideas?

    -1
  55. 70

    Nice article. Finally found something I was long looking for. I wanted to know is there a way to implement this technique for HTML data tables. I use responsive WordPress themes and these HTML tables breaks the responsive layout. And I don’t like responsive tables too.

    I want to get the tables reduced to smaller size when viewed on small resolutions.

    Please help.

    Thanks

    0
  56. 71

    Very helpful. Thanks a bunch!

    0
  57. 72

    For the iframe topic, it didnt work for me as explained above due to the divclass missing in the HTML. You must add tag at the beginning of the iframe code.

    1
    • 73

      Hi,

      I am following your instructions, but I am not a coding expert, so I suspect that I might be missing one step either in my HTML or in my CSS. Here is the page on my test server where I embedded a Google calendar, but it is not responsive to a smaller screen, as you can see: http://earth2001.net/riverdalians/facilities.html#hall

      In case if you need the source code and CSS, here is what the HTML for the calendar looks like:

      And here is what I added to my CSS stylesheet:

      .calendar-container {
      position: relative;
      padding-bottom: 75%;
      height: 0;
      overflow: hidden;
      }
      .calendar-container iframe {
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      }

      I know my calendar is a different width and height than your example, so I don’t know if that is causing the problem, but I tried to maintain the 4:3 aspect ratio, so I assume I don’t need to change the padding-bottom from 75%…?

      I am also wondering if the fact that the calendar is inside a padded column structure might be causing the problem? Will I need to have the calendar embedded in a row all on it’s own without anything beside it on the page? (In a browser on a computer, the calendar is supposed to appear to the left of a booking form (not yet installed) and the responsive design is supposed to have the booking form position itself below the calendar vertically on a smaller screen (phone etc.) It is doing that, but the width of the embedded Google calendar is not behaving responsively on that Facilities page – all other pages in the site are working responsively.

      Any assistance you can provide would be greatly appreciated!!

      Thanks,

      Vanessa

      0
  58. 74

    It is helpful indeed! You all can try this one also: http://shar.es/1gysdZ

    3
  59. 75

    Nice article. I wrote an introduction to responsive web design for embedded content if anyone is eager to learn more: h5p.org/blog/responsive-h5p-content

    0
  60. 76

    Great article Rachel,

    Do you think you could add how this would be done if doing a Tableau visualization? I am working from a Tableau public viz at: https://public.tableau.com/profile/schafer.cal#!/vizhome/AlbertaIncomeTaxes3/Story1

    With the link: https://public.tableau.com/views/AlbertaIncomeTaxes3/Story1?:embed=y&:showTabs=y&:display_count=yes

    I believe the width is 1020px and height of 1033px. Thanks.

    0
  61. 77

    Thks for helps

    0
  62. 78

    Debbie Campbell

    April 23, 2015 12:01 am

    This is great – thank you! Very simple to implement.

    0
  63. 79

    Thank you Rachel. This was very clearly written, as opposed to some other solutions out there.

    0
  64. 80

    This one really works nice! I have one issue though.

    Using the YouTube parameter ?rel=0 (don’t show related videos) seems to not work while using this CSS. Any ideas or workarounds?

    0
  65. 81

    Philip Oakley

    May 3, 2015 8:39 pm

    Thanks Rachel really useful post really helped embedding my Google map.

    0
  66. 82

    Keithie Keith

    May 15, 2015 7:07 pm

    Great article, I’m late to the party but it is timely for me LOL.

    Wondering if anyone has ever done responsive with Adobe EchoSign document signing?

    Going to be testing that out shortly.

    -K

    0
  67. 83

    I am a huge newbie at this so please bare with me on this question. I have a web site that has a parallax effect to it. I have video embedded straight into the php file of a specific section am I doing that right? Also where exactly does the wrapper code go in css if I want the video in a specific part of the site? can it just go any where? Thanks in advance if you answer!

    0
  68. 84

    Thanks for the trick, it’s awesome, worked for me !

    0
  69. 85

    I am trying to use this in my wordpress blog. I added the code to my theme’s style.css but it doesnt wokr. My iframes are still extended and chopped off in mobile devices.

    0
  70. 86

    Correction – it seems like the iframe is responsive but the content inside is not.

    0
  71. 87

    Really great explanation Rachel, but you miss the class=”xxx” from the divs in the first couple of examples.

    Not difficult for more experienced readers to understand, but could definitely be clearer for others out there.

    Thanks though – this helped a lot.

    0
  72. 88

    Okay, you’ve saved the day. I read a dozen articles on how to make embedded YouTube videos work on a responsive design, and yours was the only solution that worked. Thank you!!

    0
  73. 89

    Hi – sorry, I need to refine the link I gave you in my previous post…you can find the calendar by scrolling down, but her is the direct link:

    http://earth2001.net/riverdalians/facilities.html#hallcalendar

    Thanks!

    Vanessa

    0
  74. 90

    Great and useful article, thanks a lot Rachel. Nice quick fix for embedding external videos into WordPress responsively. The only thing missing was the final code for the page body, but it only took a minute to put it together of course. Thanks again.

    0
  75. 91

    doesn’t work!

    0
    • 92

      I’m new to coding but I think the div is missing the class=”video-container” and “calendar-container”, so if you copy the code exactly as it is, then the CSS will not be applied to the video or calendar because it doesn’t know that that div is the one to apply the code to.

      0
  76. 93

    Very helpful article. I have zero knowledge of coding here.
    I’m facing issue of embedding google forms into wordpress website, its absolutely working fine on desktop browser. but when I open in mobile browser, it’s not responsive

    The issue I,m facing is – forms looks perfect with display of 100% of the mobile screen, but rest of the page content occupies just 25% of the screen size with respect form size.

    here is my google form link- Loading…

    help me..

    0
  77. 94

    How to achieve this on blog home page for responsive youtube videos?

    0

↑ Back to top