Fixing iframe videos on responsive website

January 19, 2014 - 04:32 | 2 replies

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:

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.


Get exclusive branding and web tips, stories and notes straight in your inbox once a week:

Powered by Mad Mimi.

2 replies for "Fixing iframe videos on responsive website"

Comment »

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". ;)


Commenting is temporarily disabled for website updates. Thank you for your patience!

<--! Thank you for your reply! Please let me know if you have problems with the antispam system.
Kiitos vastauksestasi! Kerrothan minulle, jos roskaviestien eston kanssa tulee ongelmia. -->

Your name or pseudonym.
Will not be published, sold or given to third parties. Fake email may result in reporting and deleting the comment.
Please include http:// (eg.
I reserve the right to restrict comments which do not contribute to the conversation, which contain profanity or personal attacks, or seek to promote unrelated business or scams.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Email addresses will be obfuscated in the page source to reduce the chances of being harvested by spammers.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.
To prevent automated spam submissions leave this field empty.
Mervi Emilia

Hello, I'm Mervi Emilia!

Online since 1997. I'm the Web Goddess, a geek, cat person, dreamer, awesome, always right, awkward, quite boring and easily offended. This is my blog about web design, social media, life, marketing and business. Have some tea!

Twitter Follow @tasselflower
Twitter Follow @helmikuunet
Facebook Like on Facebook
Google+ Circle my Google+ Profile
Google+ Circle my Google+ Page
Pinterest Follow on Pinterest
Instagram Follow on Instagram
Flickr Follow on Flickr
RSS Subscribe to RSS


Get exclusive branding and web tips, stories and notes once a week:

Powered by Mad Mimi.

Made In Helmikuu - Web visibility with a homespun twist

Yearly archives