Build a SuperFabulous online presence!

Access 7-day email course, exclusive weekly tips, tools and thoughts, and monthly gifts, delivered straight in your inbox. It's free!

Twitter Facebook Pinterest Instagram Follow at Bloglovin RSS Feed

Fixing iframe videos on responsive website

19.01.2014 - 03:32

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="//" 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.

Thank you for reading Fixing iframe videos on responsive website. What do you think? Do tell!

Mervi's picture

I'm Mervi Emilia Eskelinen, an artist, and a multi-talent of web visibility and branding from Finland. I help indie businesses, freelancers and bloggers to stand out online. I have 18 years of experience and a formal education in everything about web design and development, branding and online marketing.

Twitter Facebook Pinterest Instagram Follow at Bloglovin RSS Feed

2 comments for "Fixing iframe videos on responsive website"

Niko Heikkilä's picture

By default in WordPress you embed eg. Youtube videos by pasting their URLs on their own line in post editor. However, you can't wrap them in divs or autoembedding malfunctions. I figured out that I need to insert shortcodes to fix it.

<div class="video-container">[embed](youtube url here)[/embed]</div>

Thanks again for posting this tip.

Mervi's picture

Hmm. Interesting. I have embedded videos in text per usual (eg. copy and paste the embed code from YouTube) on WP. But that of course depends on a) how you use WordPress and b) how the theme is made. Of course if you want to embed videos without playing with the shortcodes, you'll have to use the text editor (not visual) to make it work. Otherwise things get somewhat wonky.

That's a good tip if embedding doesn't work for some reason and you are using WP.

And hey, this isn't for those who are afraid of the "code". ;)

Write a comment