Rachel McCollin Writer, web designer and developer

Responsive iFrames

This page demonstrates code to add responsiveness to content streamed into your website form 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.

5 Responses to “Responsive iFrames”

  1. brian a says:

    Hello,

    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?

    http://prntscr.com/4y9cug

    and this one works.

    http://prntscr.com/4y9d26

    Please advise
    Thanks

  2. dj says:

    Rachel…

    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?

Leave a Reply