Comments (127)
Yohanes Mar 30, 2021
Thank You. It works well!
Mizohican Dec 04, 2020
Thank you so much, this works perfectly on my blogger account blog, when viewed from laptops and desktops. However, mobile version (any mobile browser including FB browser) is still reducing it to around 70% width, and I can't find the CSS source for mobile version in my template. :(
Muneeb Oct 31, 2020
Thanks
Mike Oct 28, 2020
This works perfectly using the old Intenet Explorer, but it does NOT work with Firefox nor Chrome.
I have no idea why?
Dividend Sep 24, 2020
Thanks!
ET Sep 07, 2020
@ Matthew Chapdelaine
Yes.
1. Go to HTML
2. Make a <div class="container"> [youtube iframe here] </div>
3. Remove width/height settings from the iframe
4. Open another blogger/editor tab, go to Theme. Click 'Customize' and then 'Advanced'. Scroll down the left menu (with fonts, colors and such).
5. Click on 'add CSS' and enter the code as printed here. Make sure the class names are correct.
6. Apply to blog, preview post. In Firefox, hit F12 (developer mode), click the small smartphone/tablet icon on the right. Try a few presets, the video should adjust to the selected view port.
ET Sep 07, 2020
Struggled with responsive YT embedding in Blogger, but this immediately worked. Thanks!
Vladyslav Sep 04, 2020
Works great! Thanks!
Samir Tendulkar Aug 09, 2020
Thanks dude you're a lifesaver
GH THAILAND Aug 01, 2020
Thankyou. You are great
Qky Jul 17, 2020
Excellent. Thank you soo much for the awesome tricks
John Jul 13, 2020
confirmed. this still works on July 2020. thank you
Howie Jun 09, 2020
@Graham and @Alena,
How do you use the css code exactly?
Thank you
Howie
Linda May 14, 2020
Exactly what I needed. Thank you!!!
Graham May 03, 2020
@Alena THANK YOU! That little snippet of code is exactly what I was looking for to make YouTube videos fit onto my web page proportionately!
Literally all I needed to do was to cut the part that said width="560" height="315" from the YouTube iframe embed code and put your code in place and, lo and behold, the YouTube video embeds neatly into my page :-)
Alena Apr 26, 2020
there is even fucking better way just put in css this:
video {
/* override other styles to make responsive */
width: 100% !important;
height: auto !important;
}
tech supp Apr 13, 2020
Awesome, finally a hack that works even after years :D
Simon Apr 06, 2020
Thank you!
Eddie Apr 01, 2020
Worked for me, thanks dude!
Phil Mar 31, 2020
Clever! Thanks!
Ben Mar 29, 2020
Thank you this was quick and easy!
Jo Mar 20, 2020
Thanks so much! Helped me out!
Chris Kempt Mar 04, 2020
Hiya, thanks for this - I used this on my blog (blogger) and it worked brilliantly after I renamed the styles to YTcontainer and YTvideo (as the style names above clashed with ones used in my template) Also, for anyone else using blogger, you can add the custom css in Themes > Advanced.
Thanks again!
Jonathan Feb 27, 2020
Fantastic. Easily the best solution I've found. Thanks
Sam Feb 24, 2020
works!
Ant Feb 08, 2020
Dude it worked! Nice, thanks a bunch bud
Vipin Jan 30, 2020
Great work, Thanks Man
Tillmann Jan 29, 2020
Thanks man, saved my life tonight!
Matthew Chapdelaine Dec 16, 2019
Can I do this in Blogger?
Bernd Dec 04, 2019
Thank you for this guide. It works well :)
Olalekan Nov 16, 2019
You nailed it. It worked.
Thanks for this guide.
Stu Oct 18, 2019
Stephen Woolston - Do you have the height and width set in the youtube embed? Try removing those if you do
Stephen Woolston Sep 29, 2019
How come it's working for everyone else and not for me? I copied exactly this and my video is a fixed small size, not filling the width of the screen at all.
Darlo Sep 21, 2019
A perfect fix!
Paul Gregory Aug 04, 2019
Love it! This has fixed a problem I have had on my site for a while. Of course the page builders can do it but I was struggling to fix my Guttenberg and Classic Editor posts.
I did struggle for a while with empty YouTube video boxes. Until I realised the YouTube video source link has to be the Embed version. For those having the same struggle go to YouTube. Click on Embed for your YouTube video of choice and copy and paste the YouTube source link from there. I included the https bit. (I hope this answers the question from the commentator below) And it worked perfectly.
Marcel Aug 01, 2019
Excellent!
sanjit dey Jul 04, 2019
Thank you very much :)
Barry Jun 05, 2019
Good stuff
srinivas May 13, 2019
Thank you. Nice logic.
Armin Apr 19, 2019
Thank you very much, awesome trick!
Nuffe Apr 05, 2019
Thanks bro worked great on Wordpress
Nick Mar 10, 2019
In case it's running on an http site. It uses whatever the host site is using essentially.
Dorian Mar 10, 2019
I'm curious, why is the video source formatted like this "//www.youtube.com/embed/..."?
Why was https: eliminated?
Mr Mar 08, 2019
Thank you! That's i needed for my blog.
Kevin Mar 05, 2019
Great stuff. Pasted the code in and ready to go.
Michal Jan 14, 2019
Awesome, but how can I change width of embedded iframe and center it horizontally
Thuan Nguyen Jan 10, 2019
Working nicely for copy / paste code. I already had a container and really didn't want to have to account for all the media query sizes. Thank you very much!
Alinda Jan 09, 2019
Amazing! Works very well. Thank you!
DJ-Design.ca Jan 02, 2019
Thanks, simple and worked perfect.
ova animations Dec 29, 2018
thanks very much man
Kuldeep Nov 16, 2018
I Simply inspected your page source,found the <i frame> text & copied & replaced the url..
Very easy & helpful thanks....
sreebala Nov 13, 2018
Thank you!
Abijah Gupta Nov 07, 2018
Works flawlessly! I'm currently rebuilding my website and used this technique in the video gallery grid view. Turns out it also works great with images, so I used it in the photo gallery as well! Thanks! :)
Daniel Mwamasika Nov 06, 2018
Worked Fine Thanks Bro
mjgila1c Nov 04, 2018
awesome! This was a huge help thanks!!
dongocphu Oct 19, 2018
wow! like
Gábor Oct 17, 2018
Thanks a bunch, this method just works flawlessly! =)
Anonymouse Oct 04, 2018
Saved my nerves, thanks!
Hardcoder Sep 18, 2018
Thanks a ton buddy.
You saved my day. V
Thomas der Sparkojote Aug 23, 2018
Lovely <3
Jess Aug 21, 2018
ermfg you just made that whole ordeal a 30 sec process. THANK YOU!!! so much <3
Viktor Jul 30, 2018
WOW, love you!! :D THANKS
circuit Jul 14, 2018
thanks munna bhai
Ragnor_of_London Jul 11, 2018
Great stuff thanks for sharing helped me out.
Varakumar Jun 20, 2018
Thank you...
Ryan Jun 18, 2018
Thank you! This was EXACTLY what I needed.
Freek Jun 15, 2018
This is quite brilliant. I used it as custom CSS in a Wordpress theme, just changed the class names to ytcontainer and ytvideo so they were unique, and presto: completely responsive youtube video embed. Thanks a lot!
simon Apr 13, 2018
how would one go about doing this using inline css???
Fabrizio Mar 15, 2018
Thank you a lot! You solved a big problem for me ...
Hardik Chaudhari Mar 06, 2018
Great one! I never think of this. Thank you so much for saving my time.
Ron Feb 26, 2018
Great job! I was looking for this solution a long time. You saved my day as well. Thank you so much!
Reny Feb 20, 2018
Thank you so much! It worked perfectly, you saved my day! xxxx
Ricardo Jan 27, 2018
Works perfectly, thanks for sharing.
Lol Jan 26, 2018
Thanks, that helped me
Gary Jan 19, 2018
Thank you, I have been looking for this for a long time :)
Cynthia Jan 01, 2018
Thank you - this works perfect!
DaWe Dec 13, 2017
Thank you, it's easy :)
Mark Dec 06, 2017
How do you add autoplay to this code?
Paul Nov 30, 2017
Thank you, that solved my problem :-)
Randy Nov 24, 2017
Clean and simple! Thank you! :)
Camilo Nov 22, 2017
Thank you! It's a simple and great solution.
baquer Nov 21, 2017
good stuff, short, simple n perfect.
ormembar Nov 15, 2017
Great solution - thanks.
Rodrigo campos Nov 08, 2017
Thank you!
This is the best working solution I found, so simple that I cannot believe I didn't saw that possibility
Pankaj Oct 29, 2017
Thanks
Sven Oct 23, 2017
Cool! You saved my evening and the crappy wordpress template that I have to use... ;)
Krasimir Jordanov Sep 19, 2017
Great. Thank you. Fits perfect
Watchoutonnet JointheFun Jul 08, 2017
This shows the video in 100 of actual size in normal window ( without Re-sizing Screen ) How do I show the video in smaller size, say width="560" height="315" size in normal ? When I resize Screen, video gets smaller with screen size but in normal mode, I want to show the video in smaller than actual size like width="560" height="315" Please let me know ? Thanks. Neelam www.WatchOutOnNet.com
Jason Bean Jul 06, 2017
Brilliant and elegant solution! Thank you!
Yovcho Kalev Jun 16, 2017
thanks man
Kushal Jayswal Jun 01, 2017
Wow. This works for my need :). Thanks for sharing. Buy the way your blog design is so impressive, neat and clean. All the best...
Alex Logemann May 03, 2017
Thank you.
Craig Kirby Apr 30, 2017
You're a legend. Thanks!
Stephan Gebbers Apr 01, 2017
Very useful! Thanks!
Fewa Chuang Mar 03, 2017
Cool trick! Thanks :)
Ross Fisher Feb 06, 2017
Lee Fairclough Fancy seeing you here!
Eric P. Metze Dec 04, 2016
Perfect. Thanks!
Siobhan McManmon Oct 20, 2016
Thanks Nick! An uncomplicated bit of code that works, what a joy!
Vladimir Chanaev Oct 04, 2016
Very usefull, tnx!
Vladimir Chanaev Oct 04, 2016
Very usefull, tnx
Azhari Ibnu Umar Sep 24, 2016
Thanks for the tutorial,, I serach many tricks on google but only this work for me.. thank you sir..
Heanzo Beanzo Jul 08, 2016
Pretty cool trick with the padding, didnt know that. Thanks a lot.
Din Masih Jul 06, 2016
thanks to you. really help.
Cliff Bandringa May 17, 2016
Thanks a lot! This even worked in my WordPress theme. After searching how to set the video pane height as a , your solution worked perfectly.
Naydee Polanco Apr 26, 2016
Worked like a charm bro, much appreciated. Still works in Wordpress 4.5.1
Anonymous Apr 26, 2016
Awesome !! Very thanks :D
Tatang Muhtar Mar 03, 2016
Thank you ...
Leonardo Saturnino Ferreira Feb 25, 2016
Thank you very much!!
Sergii Lazurenko Feb 12, 2016
Just use width: 100
Lee Fairclough Feb 09, 2016
You'll need to adjust the padding-bottom of your container to suit your individual implementation.
Niels Baeklund Jan 30, 2016
Thanks!! Works perfectly
Arin Kingma Jan 06, 2016
Wow, works superb. Thank you so much for sharing!
Goljar Ali Dec 20, 2015
Please go here know the abc of iframe http://www.patroblogger.blogspot.com/2015/09/adjust-width-height-of-iframe.html
Nabeel Khan Dec 16, 2015
awesome bro! thanks!
Nabeel Khan Dec 16, 2015
awesome bro! thanks!
Olaf Gasbriki Nov 03, 2015
Brilliant!
Robert Blackmon Nov 02, 2015
very cool fix! in my use it work well the first time page containing the video loads. subsequent loads and it's thumbnial size. i can go full screen at that point and when i escape out it fills the original div. any idea why this would happen?
Dragas Dejanovic Sep 16, 2015
Super
Nick Vogt Sep 02, 2015
Good catch. I'll make some edits. YouTube used to take up some vertical room with the track bar, which made 60 a good balance. But they did away with that recently.
Marc Molins Piulachs Sep 02, 2015
if you want 16:9 use padding-bottom: 56.25;
Matt Struve Aug 28, 2015
yet your demonstration video still has black bars at top and bottom. why?
Alex Rejba Jun 29, 2015
Awesome tip, thank you so much!
Anonymous Apr 01, 2015
Thanks!! Works perfectly and is elementary
Kristofer berg Feb 24, 2015
Thanks! Though, putting height and width in the iframe with percentages doesn't validate. You can put it in the CSS instead, together with the position, top and left. "In HTML 4.01, the width could be defined in pixels or in of the containing element. In HTML5, the value must be in pixels."
Harry Boden Feb 02, 2015
Thanks so much! saved the day..