Responsive iFrames (like YouTube videos…)

I’m working on converting a website from plain-Jane to responsive and the website happens to have some videos.  That’s all great and everything, except when you embed a YouTube, Vimeo… video or pretty much anything with an iFrame, like Facebook and Twitter embeds, they are fixed width and blow out your pretty little responsive design when you get to a screen width smaller than the fixed width of the embed.

I didn’t like that, so I went looking around and found that there is a way to kind of brute force the issue using CSS.  

**disclaimer:  This may only work on recent browsers.  I haven’t bothered to check because, really, shouldn’t everyone be using an HTML5 capable browser by now?  Seriously.  Get a life if you don’t.  Hasn’t it been made painfully clear that no one with a brain uses Internet Exploder anymore?

So, anyway, here’s how you do it.

The CSS

 This is obviously geared toward videos, since the container is called “video-container”, but I’ll show you how to do it for Facebook below.  It’s a hair different.

Once you have the CSS in place, here’s the code for your HTML

 This is the basic embed code from Vimeo for the first video I was trying to make responsive.  I think the HTML is pretty straight forward.  What all this nonsense will give you is a video that is 100% the width of the container it lives in.  In my case, the container it lives in consists of a number of spans in the Bootstrap Framework.  It would work just as well in an responsive design though, I think.  As long as you don’t step on any class names.

Ok, so, now that we have that figured out, here’s how we do it for the Facebook iFrame.

CSS

 Notice it’s basically the same, except I dumped the overflow and added some margin below the main container.  If you leave overflow: hidden in place, you lose the bottom of the Facebook frame, so I commented it out and added some margin-bottom to keep the whole frame in the container.

HTML

 So, I know, there’s still a width and height in both HTML examples.  Through some kind of magic that I don’t really want to get into, the CSS overrides those those settings.  

So, hopefully this saves you some time if you came here trying to figure out how to make stuff responsive.

 

Leave a Reply

Your email address will not be published. Required fields are marked *