Fixing iframe videos on responsive website

Jan 19, 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.

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

Yes, please!

Free download

Thank you for reading Fixing iframe videos on responsive website. I have closed the comments for now, but I welcome you to write your response to your own blog, or to voice them at Twitter or Facebook. In case you wrote your response on your blog, do let me know so that I can read it and possibly link to it from this post.

I will gloriously ignore (and, where possible, report) any responses which contain personal attacks, or seek to promote unrelated business or scams.

Fixing iframe videos on responsive website Tweet this

Did you like this post? Help me buy food:
Become a Patron!

42
Mervi's picture

Hei, I'm Mervi!

An artist, geek girl, marketer, and business coach, devoted to help you to be undeniable.

Read more