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.

3 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

Leave a Reply