Responsive Youtube Embed

Posted by: on April 14th, 2012

Responsive Youtube Embed

Responsive YouTube Embed

I came across a small problem when adding a video from YouTube to one of my blog posts about the Childish Gambino website. Since this website is fully “responsive”, I needed the YouTube video to re-size depending on the browser size or device width. But when I added the embed code, the video had a fixed height and width. No!! This looked fine on desktop computers, but pretty much broke the design when viewing on a mobile device. We needed a responsive YouTube embed code. You would think that videos that have 100% width set would automatically just resize to the surrounding container. Well, thats is not the case.

The fix was actually quite simple, and here is how.

You will need to wrap the responsive youtube embed code with a <div> and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically. Awesome! Exactly what we need.

First you will need to add the following to your style sheet.

CSS

.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%;
}

Next, edit add some HTML around your embed code.

HTML

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

If the responsive YouTube embed worked, your videos should be responsive, and ready to view on Tablets and Mobile devices.

I found this article on Web Designer Wall. Which was very helpful. Check them out for more info on Elastic Videos w/ CSS.

For a working example, check out this post on Childish Gambino. Let me know if this worked out for you!

Cheers
– John

Written by John Surdakowski

John Surdakowski is a web designer and developer currently living in New York. He loves experimenting with new styles and techniques both in web and mobile. John has a Twitter account. He posts random things. You should follow him. @avexdesign and

96 Responses

  • Guest

    This CSS trick doesn’t work anymore in Firefox 13 when you use it aside CSS media queries: you cannot resize the window’s width, it “jumps” automatically to the previous size. This is a bug introduced either in Firefox 12 or 13, I’m not sure, and I don’t know what exactly could be causing this behavior but removing this responsive video CSS solves the issue.

  • John

    Thanks for the heads up. I will look into it. It should work in all browsers. Hopefully it’s just a ff bug that will be corrected in the next update.

  • http://www.facebook.com/anton.boshoff.7 Anton Boshoff

    Hi John, thanks for this! I am implementing this for our biggest client EFC AFRICA (efcafrica.com). In the process of making the site responsive. Will send the link as soon as I am done. So simple and easy. Thanks again.

  • avexdesigns

    Anton, awesome! Congrats on the project and I look forward to checking it out. Glad this worked for you

  • Seanbelly

    Wow, great solution. Thanks!
    Works fine in FF15.

  • avexdesigns

    Good to hear!

  • Chris C.

    Love it! Thanks John! Just what I needed.

    • http://www.avexdesigns.com John Surdakowski

      No problem. If anyone has examples of this technique in use, send over and I will showcase them on the blog. Thanks!

  • Niklas

    Thanks! Works great!

  • Gobala Krishnan

    Thank you! I spent hours searching for a solution and yours worked instantly!

    • avexdesigns

      Glad to hear it.

  • http://www.byandyparker.com/ Andy Parker

    I was looking into these problems yesterday, I found a solution called fitvids? Not tested it yet, but now there are two solutions, I have a feeling there may be a bit more to it than your solution because in theory the video that will be requested will be high bandwidth option. Don’t know for certain yet until I test it later.

  • Pingback: Responsive Youtube Embeds | electblake

  • ianebaldwin

    Just what I was looking for thank you!

    • avexdesigns

      You got it!

  • http://www.facebook.com/profile.php?id=1162027737 Lisa Sinervo

    worked beautifully! thanks

    • avexdesigns

      Glad it helped Lisa…Cheers!

  • Andrew

    Schweet.

  • panmemm

    That was helpful. Thanks!

    • avexdesigns

      No problem. Glad it helped man!

  • http://polycademy.com/ Roger Qiu

    Just try max-width: 95% or whatever percentage of the outside container.

  • Pingback: Youtube and Vimeo responsive - elastic videos with CSS and HTML | Useful Mix

  • http://www.facebook.com/cokefour Clement Oke

    Thank you, you saviour of the midnight oil burners

    • avexdesigns

      You’re welcome!

  • http://twitter.com/nishobalia Nishobalia

    Thanks a lot, you saved me a lot of time :D

  • Scott

    Awesome, thanks a bunch.

  • http://twitter.com/dnlwgnr Daniel Wagner

    Super! Vielen Dank für deinen Tipp. Funktioniert wunderbar. Das habe ich gesucht! :)

  • sepelus

    Here are some tips for joomla, wordpress and drupal, as well as your own page: http://freakzion.com/index.php/The-Blog-December-2012/resize-your-videos-in-responsive-design.html

  • Pingback: Mobile Tips for Embedded HTML5 Video Streaming | Template Monster Blog

  • Mart

    Now that saved my day!!!
    Thanks a lot.

  • Pingback: Munzir Rosdi – Responsive Youtube Embed

  • http://www.topfiveawards.com/ Top Five Awards

    By the way, if you have problems with text BELOW the video hugging the video, add a margin-bottom to the mix:

    .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom:14px;}

  • Vladimir

    Where exactly to include this css code? Style sheet is too big.

    • Jessica

      Same question. I am using a WordPress theme, so within “style.css”? And, if so, where within “style.css”? Please be VERY specific. Newby. Thank you!

      • avexdesigns

        It really does not matter to much where in the style sheet. Just in your main style sheet.

  • http://twitter.com/jordanfbrown Jordan Brown

    Works great, thanks so much!

  • vectorandpixel

    Thanks you!! I like the Tutorial! =)

  • impshum

    Nice one.

  • Jessica

    After all day searching the web, this finally worked! I seriously love you right now. Thank you!

    • avexdesigns

      No problem. Glad it helped.

  • Pingback: Responsive Videos - Tobias Scheible

  • Ben

    Wicked Cheers

  • DOX

    thanks! very nice!

  • fupfac

    Nice !

  • Jaime

    Thanks for this awesomely helpful post! Tried it on my site and worked flawlessly!

    • avexdesigns

      Great! Please share your links. I’d live to see it in action.

  • Nut

    Thank you dude

    • avexdesigns

      You’re welcome! Glad I can help.

  • http://twitter.com/iamthegreatest Arild Orholm

    Thanks a lot John, this is a GREAT script, and so easy to implement! Also used the max-width option on a div inside this and it scales the video up to a max size, very smooth!

    1 question/request though, if I want to add an image to overlay parts of the video, like a close button on the right top corner (that moves with the video) – how would I accomplish that?

  • http://www.code-pal.com/ Sumeet Chawla

    Hey! thanks for the awesome solution… This one works perfectly and saved me a lot of time! ^_^

  • Gopi

    Awesome. Thanks for the post

  • tobbbe

    THANK YOU! :)

  • jo

    Perfect! Just what I needed.

    • avexdesigns

      Awesome! Glad it helped

  • avexdesigns

    Just realized that this works for Vimeo videos too.

    • Derry

      I’m getting black bars on either side of my Vimeo iframe with your – otherwise brilliant – CSS code included. Any clues on how to display without those?

  • Andrew

    Can you do this but instead of putting the code is a CSS file, directly into the article instead?? I’m using Joomla and I’m scared of messing up the templates CSS

    • Andrew

      Doesn’t matter I did it :)

  • http://www.versedtech.org/ Sudip Majhi

    Wow, thank you very much.

  • http://www.facebook.com/QuickStudy Thomas Sparkman

    Works perfectly. Thank you!!!!

  • http://lukeafg.com/ Luke

    Thank you!

  • Angela

    Thanks so much! I don’t know anything ’bout coding, and this solved my problem.

    • avexdesigns

      Awesome! Glad that it helped Angela.

  • gerald42

    Can someone explain to me why this works?

    • avexdesigns

      The idea is to create a wrapper with a ratio of 4:3, 16:9, etc etc.. Then the video inside that wrapper stretch to fit the dimensions of the parent. By setting the padding to a percentage, based on the width of the containing wrapper, the video becomes fluid… Hopefully that explains it a little.

      • gerald42

        Thanks! I guess the part that is unintuitive for me is why setting
        padding-bottom to a percentage would stretch it relative to the width of
        the container rather than the height.

  • MerZikain

    You could also use javascript since the youtube video won’t work without it anyway.

    function adjustYoutube(){
    $(‘.entry-content iframe’).each(function(){
    if($(this).attr(‘src’).indexOf(‘youtube.com’) != -1){
    var w = $(this).attr(‘width’);
    var h = $(this).attr(‘height’);

    var ww_max = 900;
    if(ww <= ww_max){
    var diff = ww / ww_max;
    var nw = w * diff;
    var nh = h * diff;
    $(this).css('width',nw).css('height',nh);
    }
    }
    });
    }

    // using jquery window resize event
    $(window).resize(function(){ adjustYoutube(); });

    Just be sure to assign a width and height to your iframe, preferably the max you'd like it to be.

  • danipen

    Thank you!!!!

  • Bruce Garro

    Very nice! Spent a while trying to figure this out my self.

  • Mattia

    Too easy… Thank you!

  • Lisa

    Thank you thank you thank you thank you thank you. Seriously. AWESOME.

    • avexdesigns

      No problem!

  • Marco

    Thank you ;)

  • Mike

    This is great I’ve got it working. How can I align the video in the centre. The usual way of centring the video doesn’t seam to work when applying this…

    • avexdesigns

      Might depend on how your website is structured. If you share a fiddle, I can take a look.

  • Pingback: Responsive Youtube Embedded videos « Wiki

  • momo

    thank you, it’s useful ^^

  • Bob

    Thanks for sharing, this worked perfect!

    • avexdesigns

      Glad it helped!

  • http://www.digitide.co.uk/ Gregory

    Nice one!!! Thanks a lot!!

    • avexdesigns

      You’re welcome!

  • scottrichardson

    Yep this worked beautifully :) Love your work! Using it on my trance music review blog: http://www.latesttrance.com

  • Pingback: Responsive Websites: Making Video and other iFrame Embeds Responsive » CapeLinks Blog

  • http://twitter.com/si_lumb Si Lumb

    This was very helpful, thank you.

  • Abbas Khan

    Thanks!

  • Nero

    Thanks for the sharing! Works perfectly ;)

  • Casre

    Thank you. works fine. :)

  • http://www.facebook.com/moneybeesltd ComputerValue Boyle

    Thx a lot John for this, very efficient! Now I’m having a small issue as I tried to set max-width and max-height but when displayed on a desktop PC it shows a big gap between the video and the bottom page. I tried different values for “padding-bottom” but it works fine on the desktop PC but is wrong on phones or tablets… any way around this?

  • http://www.facebook.com/profile.php?id=121900695 Carlos Vigo

    Thanks a lot! Worked wonderfully on my blog!

  • Chris

    TY for sharing! Just what I needed and it works perfect!

  • http://www.dav-elite.ru/ David

    Works perfectly. 10Q!!!

  • http://twitter.com/JamesPrest0n James Preston

    OH! MY! GOLLY!!! Absolutely BRILLIANT!!! I was having a slightly different problem, my Blogger Template was causing embedded YouTube videos to be squeezed and narrow, even on regular Internet Browsers. It made the unwatchable and my Blog Posts with videos became useless in this template! I did some Google-Research and found this article. I then edited my Blogger Template and now add the HTML to all embedded YouTube videos and VOILA! You saved me BIG TIME. THANK YOU SO MUCH.
    James Preston
    Durban – South Africa

  • Diego

    Thank you =)