Fixing iframe videos on responsive website

19.01.2014 · 2 min read

Fixing iframe videos on responsive website -- the tasselflower blog

Have you ever embedded a video from YouTube or a song from Spotify on a responsive website? Unless there's some sort of css-trick to fix the width and height of the video, it will be oversized and impossible to view on narrow screens.

The simple fix would be to add inside media queries the desired width and height as auto. That works with images. However it doesn't really work with iframes. For them the height gets all wrong.

Fortunately I found a fix. It's an old trick, but seems to still work.

So first you must wrap your iframe thingie with div, that has class video-container. You can name the class anything you want, but let's go with this one for now. It's more clear this way. It would be something like:

<div class="video-container"><iframe width="560" height="315" src="//www.youtube.com/embed/moSFlvxnbgk" frameborder="0" allowfullscreen></iframe></div>

Then you need to do a little something to the css-file of your theme or whatnot. Add these two things in there:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Basically the padding-bottom on the video-container needs to be something between 50% to 60%. And the iframe (or object or embed) within it needs to have absolute positioning with width and height of 100%. The safest bet is to just copy that stuff above.

10

Download my free Ultimate SEO Checklist. You will also receive exclusive weekly notes and other gifts.

Yes, please!

Mervi's picture

Hei, I'm Mervi!

I'm an artist and Online Presence Strategist devoted to help you gain the right kind of attention.

Read more