Responsive Youtube Embed

Responsive Youtube Embed

Responsive YouTube Embed

Update: I was asked to write an article for .Net Magazine on this topic. The article is more depth, suggesting some alternatives for embedding responsive videos in your web designs. Check it out in issue # 247, available October 8th 2013.

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.

Responsive YouTube Example

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

Sign up for the monthly newsletter.

Written by avexdesigns

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 where he posts random things. You should follow him. @avexdesign - Also, check out John on Instagram and Google+

432 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?

    • avexdesigns

      Maybe try a negative bottom margin.

  • 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

    • avexdesigns

      Hey James. That’s really awesome I’m glad that it worked out for you.

  • Diego

    Thank you =)

  • Arjan van der Wal

    Thank you very very very much! Hero of today!!!!!

  • Andrea Arboritanza

    Thank you John, this post was a major help.

    • avexdesigns

      Glad you can make use of it.

  • Masked Developer

    Thank you John! Saved me a bit of time here :)

    • avexdesigns

      You’re welcome!

  • http://ScoDal.com Scott Dallas

    Thumbs up, no extra wasted time on this. I actually used this same theory on a custom html5 and flash video player :) Worked first try.

    • avexdesigns

      Awesome! If you could post a link that would be great I would love to check it out.

  • Daniel Codrea

    thanks for this great and simple solution!

  • Chamath

    Thanks. It was very useful.

  • suckrpnch

    I don’t fully understand this yet, but wow… very cool. I was getting ready write some javascript to do this. So happy I did not have too. THANKS!

    • avexdesigns

      Glad that it helped. The magic is in the padding.

  • Travis

    Great solution! Thanks!

    Curious, why do your code blocks break your mobile design? Wouldn’t 100% width on them solve it?

    • avexdesigns

      Well, that’s a very good question. I just haven’t had the time to fix that. Thanks for pointing out man I’ll definitely check it out.

      • Anthony Mikiciuk Jr

        thanks a lot! any work around for ie yet?

    • http://ScoDal.com Scott Dallas

      For me, mobile browsers work with this better than my desktop browsers, especially IE.. Although I have seemed to fix IE7+

  • www.codedcontainer.com

    Thanks for the solutions. I’ve been working with a responsive design and was really concerned about how to implement a responsive Youtube video. Thanks for your help

    • www.codedcontainer.com

      I tried your solution but it did not work. The video itself did not conform to the container that I had built named video-container. What happens is the video is cropped. Any solution?

    • avexdesigns

      You’re welcome.

  • FlutteryBy

    Thank you!! It worked great :)

  • Scottie03

    You are a life saver! I knew having images or videos with any kind of dimensions would prevent the image or video from shrinking with the page at breaking points for Tablet or Mobile-this is great!

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

      Cheers!

  • Alain

    Pure genious! Thank you!

  • Ronan

    Absolutely brilliant! Exactly what I needed, exactly when I needed it. Thank You!!! :)

  • Yogesh Pitale

    This is a killer stuff! Thanks a lot john for posting this & thanks google to rank no it no 1 so I can reach here :)

  • marolo

    thanks a lot!!!! it really is a simple and brilliant solution!!!

  • Pingback: Play button overlay on embedded video | My Info Depot

  • Nonso

    Awesome. I have planned a 2 hours search on the internet for a solution and found one here in less than 5 minutes.

  • Pingback: April 2013 Meetup Notes: Make Your WordPress Theme Responsive | East Bay WP Meetup

  • PaulW

    Brilliant, thanks

  • Simone Brigante

    Thanks! It works perfectly :D

  • park

    Thanks!!!!! ㅠㅠ

  • Lukas

    Awesome – you saved me a lot of time, thank you :))

  • Pim

    Thanks!

  • simplythree

    Awesome!!!! Thanks for this!!!!!

  • http://muyosan.com/ Muyo-san

    You just saved my life!!! Thanks very much

    • avexdesigns

      You’re welcome!

  • http://nbbdoc.com/ Nathan Dockery

    Incredibly useful post.. Thank you for sharing this!!
    I had some issues copying the div code from this page, but I was able to copy it from the working demo and successfully implement it. There are also a few tags you can add to the iframe src URL for automatic 1080 HD and related video thumbnails off to streamline the user experience. Just add tags after the question mark like this: http://www.youtube.com/embed/JNrFZafw6uU?vq=hd1080&rel=0

    • avexdesigns

      Thanks! I will def check that out.

  • JJ Spelman

    Awesome, Dude!! Thanks for sharing.

    • avexdesigns

      You’re welcome JJ. Enjoy.

  • Nenad

    Too bad it doesn’t work on iPad or iPhone :(

    • avexdesigns

      Hey Nenad, If you check out the example link ( http://avexdesigns.com/childish-gambino-getting-some-love/ ) – It seems to be working fine on all mobile devices. If you can share your code, I would love to check it out to see where the problem is. Thanks!

    • Luke Jensen

      For me this solution worked just fine on iOS devices. Thanks for the post! It’s exactly what I needed.

  • Filip

    John- any chance we could get this to work with in-line HTML?
    We are embedding a video in a website with a CMS system where we don’t have access to the CSS of the website.

    However-depending on how you access the page, the frame in which we embed the video is 960 or only 700 px wide (when directly accessing the page it loads as a browser-wide landing page- when accessing the page through the website menu, an accordeon menu forces the content to be displayed next to the menu, and resizes to 700px)

    It would be great to have the video displaying at 960px when the page is loading at it’s full width, and only 700px when the site accordeon menu is being displayed next to the frame where we embed the video.

    • ze

      Add the CSS classes in using javascript? :D

  • Andrey Garbuz

    Thanks. Works like a charm

  • Pingback: Responsive YouTube embedding for WordPress themes | dotnordic

  • Ben Polinsky

    Ah you’re the man. Spent wayyy too long on this today.

  • Jeremy

    i can’t fiigure out how to do it on my theme. I put in the code but it screwed up the formatting of my homepage. Also, I am not sure where to find the css on my WP site. Any other ideas that might work?

  • Wayne Baxter

    Fab, got this to work in less than a minute. That’s how coding should be!

  • Alan

    I cant get this work on a page with multiple videos, I have 7 videos layed out in a grid formation and adding the 56% padding to the bottom destroys the grid pattern for one and secondly the videos aren’t becoming responsive, any suggestions? I wrapped each video in an individual before the iframe tag

  • Alan

    I cant get this to work on a page with multiple videos, I have 7 videos
    laid out in a grid formation and adding the 56% padding to the bottom
    destroys the grid pattern for one and secondly the videos aren’t
    becoming responsive, any suggestions? I wrapped each video in an
    individual div before the iframe tag

    • Mauricio

      It shouldn’t broke your responsive grid, because it’s only modifying the bottom padding.
      Responsive grids get broken when you change the lateral dimensions not the vertical.

  • Mauricio

    Thank you! Your code was really usefull!

  • http://esgreen.com/ Roc

    Thanks a lot! It works great and just the solution I was looking for!

  • mediaboy

    Wow, you are a star. been looking for this everywhere nad they were all similar but only yours worked. Thank you

  • http://www.be-thechurch.com/ Matt Schlueter

    Fantastic! This works perfectly. Thanks for sharing!

  • iamjadiam

    This is tremendous! Thanks a million… works perefectly!

  • Mario Villamizar

    A great, concise and fast solution to make embed Youtube videos responsive. Thanks for sharing!!!

  • EmilyGenevish

    Just what I needed – thanks!

  • Seyram

    This is awesome and thanks for sharing…

  • Pingback: What happened to your non responsive design website? | Affordable Edge Marketing

  • craig tockman

    I took it a step further by adding one simple line of jQuery:

    jQuery(‘.some-section iframe’).wrap(”);

    In case you have a lot of existing user generated content with youtube video embeds. This will surround all of them automagically with the .video-container div.

    http://www.startupers.com/jobs/docusign/2732-senior-product-manager-webapp

    • avexdesigns

      Awesome! Thanks for sharing, Craig.

  • Ibrahim

    Thanks for this post, i implimented it, just what i wanted but only one fault though. It took the video to the upper part of the site before the post title and content itself. whan you visit my blog on mobile on a video page the video will be the first thing you see.. Any help will be appreciated? Thanks

    • avexdesigns

      You will need to tweak your CSS a bit. Messing with the top padding should help. Otherwise, there might be some CSS in your existing styles that are causing the to position to the top.

    • Tim

      Sounds to me like you forgot to set the parent element to position:relative;

  • Pingback: » Come fare per rendere responsive i video nei nostri siti?

  • Paul Stewart

    Brilliant post dude. This has helped me with pod designs making content flexible and grown with this. Simple but really really effective! great job!

    • avexdesigns

      Thanks Paul!

  • Benjamin Antoni

    Hey. Just what I needed. In general, awesome website dude:=) Looks smooth and I love how you responsivized it!

    • avexdesigns

      Thanks for the kind words Ben. Glad the post helped.

  • Dharma

    Thanks for the post… but some default parameter are not working like autoplay=1&rel=0&loop=1

    example what i am using?

    [youtube http://www.youtube.com/watch?v=Dz6gFokvOr0?autoplay=1&rel=0&loop=1&playlist=Dz6gFokvOr0

    • http://www.hoc-tieng-anh.com/ Học Tiếng Anh

      I found a trick that may work in your case. Just remove height and width in the embedded code. It works :)

      • Dharma

        Thanks Hoc, But i am asking about mobile autoplay option.

    • avexdesigns

      Apple doesn’t allow auto play on videos (for mobile). Data usage issue. I would assume other providers handle this the same way. You cannot force a user to view a video on mobile without consent. If they do not have unlimited data, they might get charged from their phone carrier.

      • Dharma

        Thanks for your comments….

  • http://nateflink.com Nate Flink

    Thanks so much for this post! I used this to create a Youtube player that responds to event using the Youtube player API – here is a post I wrote that shows my full solution: http://www.objectpartners.com/2013/08/21/triggering-a-youtube-video-from-clicking-a-button-image-and-replacing-when-ended/

    • avexdesigns

      Awesome, Nate. Thanks for sharing!

  • Pingback: Responsive 유튜브(비메오) 임베딩 하기 | Knowledge Logger

  • Pingback: Responsive Youtube Videos | Aditya Raghuwanshi

  • http://michaelgkeating.com/ Michael Keating

    Thanks for this post! Before I embarked on the task of adding the code to the CSS I went ahead and adjusted the width and height of the YouTube embed code. Rather than have it be a px I just made both the height and width = “100%”. Below is a what the code looked like (I removed my video link):

    You can check out my site: http://michaelgkeating.com and see the video in the sidebar. Just so you know, it is currently wrapped in a div for style but it acted responsive both with and without the div. I tested it to be sure :)

    Cheers!

  • Guest

    Thanks dude.. This post is helpful for me…!!
    Nice blog.. Keep writing..!!

  • Guest

    Thanks dude.. This post is helpful for me…!!

    Nice blog.. Keep writing..!!

    • avexdesigns

      No problem!

  • oalah

    thank’s that’s fits for my need

  • Rusty and Dan

    This is great, but now if I could only figure out how to keep my more tag link when using the video post format I would need this as a work around! -Rusty http://www.ThePodcast.ca

  • Pingback: YouTube Videos responsive einbinden › Web Development Blog

  • Jim

    Really clever, thanks for posting

  • Myles O’Connor

    Beautiful solution, thank you.

  • Sergio

    Thank you so much!

  • Joe

    Great – thanks!

  • Nigel

    Thanks, this is just what I was looking for to make my iframes responsive. My site looks heaps better with the YouTube clips fitting properly within the page, whichever device its viewed on. My only issue is that when viewed on a PC the iframes now extend across the entire width of the page – as it’s set to 100% – which breaks up the flow of the page too much. So, I’d like to put a maximum size into the CSS – say max width=”420″. Is there an easy code to do this?

    • avexdesigns

      I’m sure you can just put a max width around the parent container. Using “max-width” in your CSS.

  • Brian

    This works great! Any reason why it doesn’t seem to work on a phone when using Bootstrap on a responsive site? The YouTube and Google map iframe is flexible in all browsers except Chrome and Safari on an iPhone. Any ideas why? Thank you!

    • avexdesigns

      Hey Brian. Hmmm. I’m not sure, but Bootstrap might have their own way of embedding videos, responsively. And this code might be conflicting.

  • Eddy

    This only works with 1 video, if you add more, the following ones will not display

    • avexdesigns

      Not really sure why two videos would not work for you. I would suggest checking if the videos have their own ‘video-container’ DIV.

  • Guest

    avex any chance of helping me out here, i am using expressionengine forum and this solution seem to work but for resizing video but if user adds multiple videos in same post it stacks them on top of each eachother and the post content goes behind the videos.

    Thanks

    • avexdesigns

      Im not really a pro on expression engine. But make sure that each post that contains the video has it’s own “video-container” DIV. They will also need some padding of they are stacking directly on top of each other. Make sure ONLY the video is wrapped in the container.

      If content is being covered up by the videos, this might be a float clearing issue.

      • Guest

        avex thanks for getting back to me on this, i though of that as well the only issue i seem to see with this is that all the content comes from body tag that expressionengine uses, and i think this will not work for me, as videos and post are in same tag. i think i have to use media queries.

  • Steve

    Howdy, great tip, thanks very much. I’ve added this code to some Vimeo video, works well except when resizing the browser the videos are getting small black edges around them. at some sizes you can see them, at others you can’t. Is there a fix for this?

    • avexdesigns

      Try setting the width in your embed code to 100%.

    • Michael Gardash

      For Vimeo just set the padding-top to 0px. This will fix the extra black bars.

  • tullius3

    Thanks! Great tip!

  • Ben

    Thank you for taking the time to share this. It works beautifully.

    • avexdesigns

      Glad it worked for you Ben!

  • Abhi Chatterjee

    Thanks a lot.

  • Pixeltender

    Worked great, thank you!

  • erata61

    thanks for tutorial.

  • solidgoldextra!

    Ok, this works very well actually. Great work. Now I just need to encapsulate the HTML into a WordPress shortcode for all my YouTube embeds.
    Thanks so much.

    • avexdesigns

      There is actually a WordPress plugin for this as well. I just wrote an article on the topic for .Net Magazine.

  • José Guilherme Lobato Vidal

    Valeu camarada. Você foi rápido e certeiro. Obrigado!
    Thanks buddy. You were fast and accurate. Thank you!

  • RichardPettet

    very helpful, appreciate it. thank you!

  • techno

    hey there, thanks a bunch!
    I came across a curious problem though. When adding percentages to the iframe width & height my embedded youtube playlist won’t autoplay from video to video. Meaning it plays the first video, and then stops.
    If the width & height of the iframe are set to fixed pixel sizes the embedded playlist plays through all the videos, no problem.
    This sounds very strange but is the only thing I could figure out so far in trying to embed a youtube playlist fullscreen and have it play through all it’s content.
    any ideas?

  • Kristian Stock

    Very helpful!

  • http://awesci.com/ AweSci

    Thanks. It was written so well! I could simply complete the implementation on my website in seconds. :)

    • avexdesigns

      Awesome!

  • http://www.thatsreallypossible.com/ Glyn Taylor

    Perfect!! Thank mate!!!

    • avexdesigns

      Glad it helped Glyn.

  • Thomas Brunkard

    One of the most useful posts on the internet and such an obvious fix! Thanks for sharing John!

    • avexdesigns

      Thanks Thomas!

  • tullius3

    Super helpful… thanks!

  • Hunter Leachman

    You are the man!!!!

    • avexdesigns

      I agree with you.

  • Alexander

    Thank you, thank you so much! This is really helpful.

  • Keiver

    Works perfectly. Thanks.

  • Nefer Lopez

    Eres el HOMBRE! Thanks so much!

  • http://aucoinstats.ca/ François Aucoin

    Very useful. Thank you! A+

    • avexdesigns

      I never got an A+ in my life! Thanks! lol

  • SAM0094

    Was very useful and save a lot of time

  • Jesther Bas

    +1 for you brother, Thank You!

  • Dogan

    Is not useful when you wan to show only 640×360.

    • avexdesigns

      Yes. This is used to make it fluid / flexible for any device. Where we’re going we don’t need pixels.

  • Glenn Schworak

    Thanks! That was very simple and exactly what I needed.

  • Fabio Mameli

    Hi John, thanks a lot for the code.
    With this css, I’m improving a joomla responsive website. =-))

  • Michael Erwin

    Any ideas on how to make this work when using flexboxes?

    • avexdesigns

      Interesting.. I haven’t tried it yet. Should work in a similar way.

      • http://themetamethod.com/themessage Michael Erwin

        Might be due to other factors on the page. Had to ditch flexbox layout for this project anyway because of Firefox’s lack of support for multi-line flexbox.

  • Pingback: Tipps & Tricks – Youtube Videos in responsive Sites einbetten

  • MissLily

    Thanks for this! Just what I needed. I had a responsive wordpress theme, but the non responsive youtube videos were botthering me.

    • avexdesigns

      Awesome. Glad it helped

  • Zach

    HOHO! You’re the man, thank you!

  • Pingback: Responsive Embedded Youtube Videos | It Mole

  • http://www.redjumper.net/bookcreator Book Creator Team

    Thanks, we used this is on our site. Much appreciated.

    • avexdesigns

      Awesome! Would love to see it. Send over a link.

  • Azman

    Thanks alot, I just need it. Simply awesome….:-)

  • pola

    great!!!!!!

  • Aiysha

    Hi I’m using this on a video in an iPad the quality of the video being returned is really poor. Works great in all browsers and the iPhone

    Any Ideas?

    • avexdesigns

      I don’t think that this code would cause the video to lose quality. It might just be the video itself. Or the settings on the video. Also, I believe YouTube serves up differently video quality based on signal strength.

  • http://www.berkaygeldec.com/ Berkay GELDEÇ

    http://paste2.org/XjMjp4Lx This Function automatically add ‘ div class=”video-container” ‘ for wordpress, code is poetry :)

  • Pingback: Youtube Videolarını Blogunuza Responsive Olarak Ekleyin

  • JJ Spelman

    Awesome, Dude! Thanks a million!

  • John Meyer

    Thanks for this! Works like a charm.

  • Seraphyx

    Thank you for this… been searching forever on how to both embed only the latest video and responsive, this solved both issues.

  • Tessa

    You made me look like a genius! THANK YOU

  • ImagoSonus

    i do a reach the tag with your .css if the path is i dunno if i’m right but seem that (in Joomla) if i put youtube video in a module the iframe tag don’t get the right .css

    • andre

      change our editor joomla ,maybe to be works

  • Myles O’Connor

    Thanks! Very helpful.

  • Ajey

    awesome !!! works 100%

  • Pingback: Youtube Videolarını Blogunuza Responsive Olarak Ekleyin | Gafolik.com

  • Matt

    Having trouble making this work in blogger. Any suggestions?

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

      Without seeing the code or link I would just be guessing.

  • http://aucoinstats.ca/ François Aucoin

    I just used it (your CSS solution) again for another projet. So, once more, thank you very much! A+

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

      Good to hear.

  • Rose

    Perfect! Thanks a lot!

  • iyakiggun

    Thanks! I really helpful!

  • samdutton

    Nice and simple! Works a treat – thanks!

  • Grolus

    Nice! cheers

  • nathan_f77

    Thanks so much, it works perfectly!

  • ngtrian

    Awesome!, Thank you so much

    • avexdesigns

      You’re very welcome!

  • Robert

    Thanks for the nifty solution. Any clues on how to implement a ‘Chromeless’ version?

    • avexdesigns

      I think that might require tweaking the code that google provides. Not the above css/html

  • http://aalaap.com Aalaap Ghag

    My goodness. This works so perfectly!

    • avexdesigns

      Glad you can make use of it.

  • http://techshali.com/ Madhav Tripathi

    It works and it is perfect for my website.

  • Pingback: Responsive YouTube Embed « SecondHack

  • Rakesh Sompura

    Thanks a lot! It has saved my day..!!!

  • mai_kol

    Thank you John, that did the trick for me!
    All the best,
    Maikol

  • Jason Amaro Reinert

    Incredible work – this is an eloquent container design for such a complex problem.
    Thank you as it saved however time it would of taken for me to deduct to something like this.

  • Gordon McNevin

    As always, works just the way we all wanted it to! Thanks for sharing :) Responsive design is still young but these kind of tweaks make it well worth it.

  • Eduardo Feo

    That works perfect!… Thank you so much!

  • Pingback: Vídeos de Youtube e Iframes "responsive" en Wordpress

  • Elise Chant

    Do you know why the random 50-60% padding makes the thing work? As in, what does it force the browser to enforce?

    • http://www.ifyoumakeit.com ifyoumakeit

      Check my reply out above to see why it works.

      • Elise Chant

        Ok, gotcha. Cheers.

  • Edgar Cerecerez

    Works great! Thanks for sharing.

  • ap24081984

    Thanks :)

  • Johannes Stadler

    Thank you very much. I had to remove the “padding-top: 30px;” from the video-container css otherwise it would cut off these 30px from the bottom of the video in IE8. Can you tell my why you put them there in the first place?

    • http://www.ifyoumakeit.com ifyoumakeit

      The navigation for video player used to be under the video and it was 30px high. YouTube’s player is now over the video, so no need to add 30px of space for the player.

  • http://www.ifyoumakeit.com ifyoumakeit

    Thanks for this! So helpful.

    For anyone wondering, the reason it works is because YouTube videos are all in a 16:9 format.
    So if the width is 100%, then the height would have to follow the same ratio.

    16/9 * 100 ~= 56.5%

    The padding gives the illusion of a 16:9 box which is filled by the video.

    • Guest

      Also when I say 16/9 * 100%, I actually mean 9/16 * 100% ~= 56.5%.

      Whoops. (H/W) * W = H.

  • petefromhome

    Hi guys,

    Not sure if anyone can help me out…

    For some weird reason after visiting this page in Firefox all the example videos are showing and resizing as they should be…

    I have added a youtube video to the home page of my wordpress site using a code above, but some reason the video does not get displayed in Firefox… it is showing and working in another browsers, expect Firefox!

    Am I missing something here?

    Hope someone can give me some idea.

    Cheers, Pete

    • avexdesigns

      Hey Pete, can you share a link?

  • petefromhome

    Hi guys,

    It is all working now…

    I tried a new html platform called Foundation, and it is all working now in Firefox.

    Happy days! :)

    Cheers, Pete

  • Pingback: Getting a 39% Optin Rate

  • Kelly

    Hello, I was so happy to find this, as it seemed so simple. But I have followed all the steps above and my video still isn’t automatically resizing. I added the css to my stylesheet (p7ccm-responsive.css) and then edited the html as shown above, but with no results. My url is http://www.wichitaridingacademy.com/summer.html. If anyone that knows more than me could please advise, it would be so appreciated!! Thanks!

  • Pingback: Victor Kane: Look Ma, responsive embedded youtube videos in Kalatheme - Drupal King

  • Wasi Abbas

    O’smmm that’s really helful…

  • Gustavormello

    This is exactly what I was looking for. It worked like a charm. Thank you so much.

  • Beatriz

    insert into joomla as

  • Johnny O Boy

    Perfect. Works great.

  • JD

    Thanks!

  • Jerry

    This is a lot better than my Media query solution, works wonderfully on my site, http://thedaysbuzz.com THANK YOU!

    • avexdesigns

      Awesome.. You’re welcome!

  • Amit

    Super. Works great. Thanks!

    • avexdesigns

      You’re welcome!

  • Tomas Björkén

    Great post!
    Do you know if there is a way to embed a YouTube channel 100% responsive?

    • avexdesigns

      Not sure what you mean…

  • Art

    This is genius, thank you.

    • avexdesigns

      You’re welcome!

  • Kate

    This is perfect. Thank you so much!!

    • avexdesigns

      Very welcome Kate

  • Pingback: Responsive Youtube Embed code | ART435

  • Xander Vinters

    THis is really great! I have used it on my blogger blog and works like a charm! thanks a lot!

    • avexdesigns

      No problem!

  • Pingback: Embedding Responsive YouTube Videos - Matt Jennings - Web Designer & Developer – Seattle, WA

  • Pingback: 5 powerful techniques for responsive web design | CatsWhoCode.com

  • Pingback: 5 powerful techniques for responsive web design | Daniele Milana

  • Jonathan Sachs

    It is smart, generous guys like you that save the arses of not-so-smart guys like me, late at night, when the site is due tomorrow. It is really appreciated.

    • avexdesigns

      Glad this trick helped Jonathan!

  • Beytz

    AMAZING – Thanks.
    I was amazed when I realized that BIG GOOGLE that preaches on mobile all day long does not support this (or share a solution).

    Do you have experience with Google Comments? (will this work as well?)

    • avexdesigns

      Yeah, I’m not sure if google can do anything. Unless they have a separate piece of code for responsive only. It might be confusing to users who have no idea what responsive design is.

  • Pingback: 响应式网页设计中5个必备的技术 – 互动殿堂

  • yourkishore

    Its good but some mobiles do not support flash so, how a responsive flash frame can play on mobile where no falsh installed ?

    • avexdesigns

      Because YouTube and Vimeo (as well as most other video vendors) both provide an HTML5 video fallback for devices that do not support Adobe Flash.

  • superdan

    Good solution! Simple Instructions! Most Importantly it works! Koodos Guys! Thanks Alot! Google should really bump this article up!

    • avexdesigns

      Yes they should! lol

  • Pingback: 유튜브 영상 가로 100%로 설정했을때 세로 auto | Aloveu

  • Max

    Worked great, thank you very much! :)

  • http://kool-computers.com/USAPatriot/ DMChoreographer

    Excellent, the timing could not be better. Thank you.

  • RG Online

    great thanks for this, solved my problem

  • ItsAdam

    Absolutely Fantastic! Thanks, works like a boss!

  • Virginia

    Thanks it work perfect!
    I was trying to add a image with a link over the video (like skip intro and go directly to the site), and i couldn´t. I tryed a lot of diferents div: relatives, absolutes, z-index, etc… Is there a simply way to solve something like that?

  • http://www.problogger.gr/ Pano Kondoyiannis

    It’s working perfect. Thank you.

  • Pingback: Responsive embed видео - Блог за редизайн и SEO

  • http://atrum-blog.com/ Jorge Calle

    Hi! Thanks a lot, this is helping me a lot!
    But I have a question: How can I mantain the initial size of the video? Because after using the CSS it resizes to the full width of the page.

    Regards!

    • Frank

      It happened the same to me. I’m using Moodle.

    • avexdesigns

      Try “max-width” – You shield be able to control the container that holds the video.

  • Roman Kozák

    Thank you!

    • avexdesigns

      You’re very welcome Roman

  • Narankhuu

    Thanks, saved my time. U r cool.

  • Mary Lukens

    I love it when something works the first time. Thank-you!

  • Pingback: Diseño web para móviles y tablets

  • susanne

    After two days searching how to make a you tube responsive either with modules in Drupal or plugins in WordPress or css i found your solution that is the first one that just works!! Thanks alot! Susanne

    • avexdesigns

      You’re welcome Susanne.

  • Podoseb

    Hello,
    I was wondering if there is anyway to make this work without editing all the videos i have on my website. I am trying to use Lazy Loads plugin because i often embed many videos in each post on my website and loading images instead of videos would speed up my website a lot, but it only seems to work when the youtube URL is standard, without any HTML code “around” it.

    So, is there a way to make the YT video responsive and, at the same time, use the Lazy Loads plugin?

    Thank you in advance for your response and for the nice post.

  • http://www.andesdevelopment.com/ Dennis Santos

    Great Job,

    I just used it con my website, and it took me 2 minutes to make it work. Ty for sharing it. I know it will help a lot of people.

    PS: By the way, my website is running on WordPress CMS, only add the CSS to your custom theme and the class name to your shortcode and your ready to go.

    Ty very much.

  • Matt Giovanisci

    width=”560″ height=”315″
    This code works wonderfully, but there’s one issue.

    When you want to remove the Show Info bar and the controls, black bars appear. Here’s what it looks like on my site.

    I’ve created a custom shortcode to embed youtube videos on my site. They play in full 16:9 ratio, but the custom thumbnail is the issue.

    I thought I could just update my thumbnails to a bigger size, but this is not the case. Do you have any ideas on how I can fix this?

    I can tell you that if I change the padding, the black bars on the top and bottom go away, but when you play it, they come back on the left and right. Any ideas here would be helpful.

    Thanks!

  • Pingback: Responsive YouTube Player with Scrolling Thumbnail Playlist - Wooster Web Design

  • idealdragon

    thx alot for saving my time, it works like a charm with my joomla/k2 template

  • Allen

    Much thanks John! Works great. I’ve edited the max width & height but I’m having problem getting the video to center. I’ve tried about every way I know how. Any suggestions?

  • Ethan

    This works great, thanks a lot!

  • Louis

    Works perfectly thanks :)

  • uchil

    awesome buddy, thanks a lot :)

  • Nephi Jay H

    This is working in Chrome. But in Safari, Firefox and IE, .video-container appears to maintain a height of 0 rather than match the iframe’s height. I’d give you a URL but it isn’t hosted yet.

    • Nephi Jay H

      I take it back — I had to switch the iframe’s position to absolute. The thing is, I had set it as relative because when it was absolute it locked the .video-container to the top-left corner of the page. So now the video is showing up in all browsers, but it’s at top:0 and left:0 within the page.

  • Rod

    Perfect. Exactly what I needed. Great post.

  • Pingback: YouTube Responsive Design | Bobby Chuck

  • Suzanne

    I’m not very technical. In WP adding that css code in style sheet, where do I put the code? At the top of that style sheet, at the end…?

    • Steve

      GTFO, plenty of places to find that info. Or, you could use the custom CSS section :D

    • http://www.ljasinski.pl/ Studio Multim. ljasinski.pl

      Use custom css section or create a simple plugin adding additional css file. If you simply add it to your theme’s stylesheet, you will lose all your changes after theme update.

  • Arlan Tazmin

    Thanks John!

    ps just noticed your last name and remembered you worked for commission with SteveP back in flash websites and evites days, i did some intern work there.

  • apple

    it does not have a responsive height, if my container height equal to the browser height?

  • http://virtualpbxindia.com wordpress

    thanx bro it works graet…

  • Tarik

    You’re amazing. Thank you so much, you just saved me 100€. God bless you.

  • Fred

    Works in Safari, not in Chrome. Chrome does not let css target

  • Pepe

    Post excellent!!

  • https://twitter.com/EdLuvables Ed Luvables

    Beautiful, it works like a champ. Nice mediatemple plug in the sidebar too, they do a great job!

  • Matt Lockyer

    Awesome job! Thanks for the post!

  • http://www.marshallbishopartist.com/ Marshall Bishop

    Awesome idea. I found this code on my first Google search after putting videos on a MegaMenu and the code worked like a charm! Thanks!

  • Maximiliano Pundang

    It works excellent! But in chrome for android I cannot view the video when I press play button. Do you know any idea for fix it ? Regards.

  • Pingback: Responsive Youtube Embed | tediscript.wordpress.com

  • CSwinn

    This works great, except in the template I’m trying to use! It can be found here, http://html5up.net/miniport. I’m trying to add responsive videos to the boxes in the portfolio section and they will only stay 315×560 while popping out of its container. It also won’t resize with the rest of the site as I decrease browser size. What could be wrong? Is it possible the template has code blocking this tutorials code?

  • Pingback: 박진호의 21세기 일기 » 아이프레임으로 퍼온 유튜브 동영상을 반응형 웹으로 재생하는 방법

  • kimurphy

    Thank you, sir! Works wonderfully, and is exactly what I needed

  • Mike Oliver

    Thank you very much, just finished a responsive site with a bunch of youtube videos, they were the only thing on a mobile device not responsive…I just fixed them thanks to this post.

  • https://plus.google.com/+MaxWilliam Max William

    Thank you very much, sir!

  • http://www.crossvinerealty.com Eric Thomson

    Thank you!!! So simple!

  • Ajay Gadhavana

    awesome tutorial. thanks man

  • http://www.blackcountrycinema.com Black Country Cinema

    Great tutorial, works on any embed. I tried it on the Distrify player and it works a treat.

  • Mr. Gatto

    Work perfectly! Thanks a LOT!

  • Pingback: การทำ Fluid Height (กำหนดความสูงเป็น %) | Earthchie

  • paquino

    Works for both YouTube and BrightCove video players. Thanks!!!

  • Miro Radenovic

    you WIN

  • bforboris

    Thanks for the article, it works very well!

  • Keish125

    Thanks! Great code! Works great!

  • Tinette Nolan

    Thanx! That was the easiest fix ever. :)

  • Wendel

    Thanks man! u save my day (:

  • Pingback: How To Make A YouTube Embed Responsive | Cener Social Media

  • seyoung

    thank!!

  • Pingback: Create Youtube oEmbed Responsive on Wordpress | Simple Code

  • http://iamkeir.com iamkeir

    Thanks! Can you explain why the padding needs to be between 50% and 60%? I’m not sure what that is actually doing.

    • http://css3.bradshawenterprises.com/ Richard Bradshaw

      Widescreen is a 16:9 aspect ratio. (9/16) = 0.5625, which as a percentage is 56.25%

      • http://iamkeir.com iamkeir

        Genius! Many thanks.

  • ^nemo

    Thx! Great code and works perfectly!

  • Pingback: Hacer que los videos youtube embebidos sean responsive

  • RitaG

    Is there any way to make this work on a Google Site? I’ve tried the HTML Box gadget but it doesn’t allow iFrames. I get the following error message: removing disallowed attribute src on tag iframe

  • sc456a

    Worked perfectly. Thanks!

  • http://mkleine.de Matthias Kleine

    Nice one! Thank you so much ;) Works nice!

  • http://www.abrentco.com/ Kevin Brent REALTOR®

    Works Perfect! Thanks

  • http://www.schroedersimon.de SchroederSimon

    Just noticed it doesn’t work with IE, it overlays the navbar :(

    • 醉拳

      Really? Nobody seems to test things for IE in the web dev community. What a shame…

      • http://www.dutchamsterdam.nl/ DutchAmsterdam

        Nobody makes parts for the Edsel either.

  • RespondingResponsiveResponder

    My biggest question: How can it have a max width and height and then be downward responsive? This solution puts the video at the width of its parent, which can be way too huge if the parent element spans the width of the browser window. I would love to implement this with a video that is centered and has a max with of about 800px.

    • http://missiondeve.com Eric Wang

      can someone please answer this, I have the same problem

      • http://missiondeve.com Eric Wang

        Fixed it by adding another to wrap the .video-container, and in css you specify:

        .video {
        max-width: 560px;//or whatever you want your video width to be
        }

  • Jenny

    Thank you! Thank you! works great!

  • Pingback: ใส่ Youtube ใช้ได้มือถือทุกจอ | PlusMagi's Blog

  • Pingback: Designing Your Own Masonry Grid Layout From Scratch | La Rédac' en parle

  • Flavio

    Hi! thanks for the info, but after I found your site, I found this one with a great way of doing this:

    http://embedresponsively.com/

    tks!

    • http://www.websitecandi.com Website Candi Inc.

      This is a heaven send! Thank you so much!

  • http://logoscda.com J.v.C

    Thank you! Works great!

  • Hjalte Ravn Sofienfryd

    Thanks. This was just what I needed :)

  • Pingback: Responsive YouTube videoer (embed) - Martin Hartmann

  • Brad

    I don’t believe it! IT WORKED! That was so easy. Thought I was going to have to spend half the day on this, but no. Thank you!!!

  • Fabio

    Very interesting… I suggest to add “display: block” for the container, in some cases (css reset or inline tag for ex.) would be usefull…

  • Pingback: Responsive YouTube Embeds in WordPress | Steenium

  • Dustin Donham

    Thanks!

  • Андрей

    Thank you! Works great!

  • frostymarvelous

    Thanks man. Works great!

  • jimmy

    Thank you, worked well and was easy to get going

  • Pingback: Responsive YouTube Embed | Perez Gabriel 89

  • https://www.ureka.org/ ura soul

    i’m having difficulty getting this approach to work with ios and some other cellphones. the player just doesn’t render. anyone know why?
    here’s a url: https://www.ureka.org/videos/watch/8733/mike-love-permanent-holiday-hisessionscom-acoustic-live

    • Valerie Cudnik

      Because you haven’t applied the CSS to the wrapping div correctly.

      • https://www.ureka.org/ ura soul

        in what way?
        the css of the wrapper div includes the items that are listed in the walkthrough on this page:

        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0px;
        overflow: hidden;

        plus some other css that helps the element fit into the page (and some that was leftover from the previous setup)

        text-align: center;
        margin-left: 0px !important;
        margin-top: 10px;
        margin-bottom: 10px;
        z-index: 9997;
        max-width: 100%;

        thanks

        • Valerie Cudnik

          I don’t know why, the first time I looked I missed the code. I must have been looking at the wrong place.

          BTW, it works fine on my iphone 4s in iOS7. The title is cut off, but the video size is fine. It also works fine on my 7″ android -powered nexus.

  • sdgsg

    earyasey

  • Valerie Cudnik

    Elegant and easy solution! (and good SEO because I found this on my first try)

    Thank you.

  • mikeriley131

    This is fantastic. Thanks for the post!

  • Rick

    Thanks! This worked like a charm!