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:

<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.

Become my pen pal!

Get exclusive stories and notes straight in your inbox once a week:




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

Comment

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.

Will not be published, sold or given to third parties.
Please include http:// (eg. http://mervi.helmikuu.net)
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.
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 Twitter/@tasselflower
Twitter Twitter/@helmikuunet
Facebook Facebook Page
Google+ Google+ Page
Pinterest Pinterest
Instagram Instagram
RSS RSS

Become my pen pal!

Get exclusive stories and notes once a week:




Made In Helmikuu - Web visibility with a homespun twist

Yearly archives

Search and find