Rachel McCollin Writer and web developer

Responsive iFrames

This page demonstrates code to add responsiveness to content streamed into your website from other sources such as YouTube or Google Calendar. These external sources embed their content in an iframe in your page, which has a fixed width and height. This can break a responsive layout if you don’t add some extra CSS to fix things.

Responsive Video

I’m using a Lego video as that’s what gets viewed on YouTube the most in my house – I have two small boys!

If you resize the browser window, the video will resize with you.

Responsive Calendars

Making a calendar responsive isn’t ideal as it does make it very small, but it’s¬†certainly¬†better than having the large calendar break your responsive layout.

This entry was posted in Responsive design. Bookmark the permalink.

8 responses to “Responsive iFrames”

  1. brian a says:


    Thank you for your tutorial. I was able to make it work on 1 page, but some some odd reason, I cannot get it ot work on another page. How can I force my iframe to resize like responsive mode like the other page?


    and this one works.


    Please advise

  2. dj says:


    I guess things have changed a lot in the past while. The YouTube instructions don’t seem to be working for your site. In fact that’s why I’m writing. I need to embed youTube <iframe on a responsive site and none of the advice seems to be working anymore. With a lot of work I got the TED talks to work but when trying to embed the youtube <iframe the thing just doesn't work (ie after removing the height and width and combinations of them both). Compounding the frustration is that I've now clicked on the first two pages of Google'd sites and every one of them gives the "simple answer" and shows a demo – which doesn't work for them either. Google must have changed something that prevents responsive design – the embeds work just not responsively. Is there any update you can give?? Please???

    • Rachel McCollin says:

      Hi and thanks for your comment. I’ve just tested this on this page and it’s working fine for me – I’m not aware that anything has changed which should affect it. Have you checked the tutorial on Smashing and copied the code from that?

      • Marcus Shen says:

        This solution doesn’t seem to work on mobile browsers for some reason. In particular, the calendar above is getting cut off at Thursday for both Safari and Chrome for iPhone. (YouTube embed works on both.)

        Any insight would be appreciated.

        • Rachel McCollin says:

          Hi Marcus, this post isn’t designed to be used on its own but I used it to test a technique I wrote about for Smashing – I suggest you check that out.

  3. Andrew says:

    Hi There,

    How can I get (shop.spreadshirt.com/tiptopshirts) to Show Up Properly on Phones when iFramed info (TipTopShirts.com)? :–)

    Truly, Andrew

Leave a Reply