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.

One Response to “Responsive iFrames”

Leave a Reply