How To Make iframe's Responsive (YouTube Embeds, Google Maps etc.)

[@decipheroffair6979]

Just did this for youTube iFrames embedded in a Wordpress themes. It worked first time, thank you! Just wanted you to know how much I value people like you sharing your knowledge on here. Best wishes

[@DanielAttila]

Absolute genius. The doesn't scale proportionately, but the DIV does. Thanks very much.

[@davidtorres5795]

I have been searching this for months. Thank you!!!

[@barkbarkatthemoon]

This works great but you have to wrap this in yet another if you want to scale its size because you can't change the 100% values and still have no blank space below it.

[@pauldavy1450]

been looking for this kind of fix for a long time! and explained so clearly it to seconds to understand. thank you :)

[@GracefulEmbroidery]

Very clear. Thank you. How can I set a mix-width for this so it stays at the 560 pxs on a PC?

[@reedyma]

Thank you so much my man! I was stuck on a problem and you walked me right through the solution. Adding the understanding section, thank you for that too, it let's a user learn instead of just being a copy paste script jobber.

[@onorosaurosrex]

well Krane, you made my day, all the best wishes.

[@mayrarincones8427]

thank you so muuuch!!! I've been struggling with this for hours!!

[@ACEinOZ]

I want to make a two column Iframe webpage, with links in the left column opening in the right column, and any help to find the code so I can do that would be appreciated.

[@Zuldria]

Thank you, sir. I was having trouble with having it work with my mobile layout and this video solved my problem. 🤓♥

[@wisdomtomato7331]

OMG, you are incredible, that's exactly what i was looking for

[@calebrunion]

Thanks for the video, very helpful. The text editor font-size is pretty small. It would be easier to follow if it was larger.

[@livingyearsmotivation]

Thanks, can you share a solution for pdfs? This doesn't work with pdfs in s.

[@radar_raps]

How would we make it centered?

[@MemorizeAndLearn]

Thank you! Solved the problem with an easy solution. Many of the other solutions out there are not great. Much appreciated.

[@christophergarces5708]

Thanks man, but how do you remove that white space at the top of the embeded video?

[@Zaq150]

but how to do such height set to its content???

[@tennisfitapp]

hey, I tried this in Teachable platform and just won't work, any suggestion why? thanks alot!

[@GoodGuy374]

ok.. so how do we make this work on css-grid? if I have sidebar on left and content on right, footer in the bottom.. it goes out of grid when I put embedded video in content grid.

[@PaisleyCanada]

Whoa. I never thought a child element would fill the *padding* area of a parent, but I'm guessing this is due to the relative/absolute positioning. Nice trick!

[@GregDavidsAus]

"Original article" link is not working. 404 error. Might want to fix that? Cheers

[@nishmamaskey1093]

still the same.

[@seppneimusser5723]

What's about id="main-doc-body" ... ?

[@thetowerfantasymusic]

Thx, works as of August 2021. I'm doing a React app and it's perfect.

[@werewolf5]

I needed this for a webflow client, thank you so damn much.

[@bagusrahmat69]

does it work properly on iPhone?

[@segsfault]

To get your Aspect Ratio Percentage Use This Formula Ratio = a:b Percentage = b/a*100 = your% Example - Ratio = 4:3 Percentage = 3/4*100 = 75%

[@kinnyvergara9419]

realy thanks from colombia. this has been the best solution for me. thanks. sorry for my bad english

[@PaperKrane]

No apologies necessary! Thank you for taking the time to write / watch!

[@mgr5550]

Does anyone here know if we can use this code within an Adobe Muse webpage project ? I put in this code into and Object > Insert HTML and it didnt show any responsiveness.

[@SarojKumar-bq3cd]

yes the video is responsive but the problem is that video is appering very big in size. if we fix height and width then video become no more responsive how to fix this issue. please help me to get out of this.

[@PaperKrane]

You need to define the parent elements size of the video.

[@SarojKumar-bq3cd]

@@PaperKrane thank you it works😊

[@sammynite2940]

You made my day! So happy!

[@kevinmorin-kensicki364]

Thanks for the vid. I did what you stated in the video to make my google calendar responsive. When I resized my browser on my computer as you did in the video, it worked fine. However when I uploaded to my server and looked at it on my iphone 5s, it still cut off the Friday and Saturday columns of the calendar. I my larger iphone 6s, it cut off the Saturday column. But thanks again for the video. I found your explanations very helpful.

[@itech40]

So I understand what happens, I did it and it works, so thanks a lot man! BUT, I'm not sure I understand of the trick works from A to Z. You're awesome bro

[@jonnyspade]

I tried this in adobe muse, once I hit my first master page breakpoint, many aspect of the site disappear. Any advice?

[@the1socialmediadivafloyd470]

i need to play vertical videos on my webpage without the black bars from a 16:9 frame

[@tauhided1861]

how about making the font size far more smaller?

[@PaperKrane]

Will make sure to do this just for you next time.

[@marioalejandroguzmanberroa8327]

Hello, thanks for share your knowledge. Bro i have a question: this implementation works fine with other type of url? Like other html page? Thanks for your support, regards!!

[@Hiker97]

Thanks, worked great!

[@Rebecca-sv3vd]

I cannot read the code you are writing on the screen, can you copy your code into the comments section?

[@PaperKrane]

Essentially it is: With Styles such as: .video-container{ width:100%; height: 0px; padding-bottom: 56.25%; position: relative; } .video-container { position: absolute; width: 100%; height: 100%; }

[@bradchellingworth5973]

Would be nice to see a solution that doesn't require you to specify the padding-bottom as this only works for that aspect ratio. For example, if you are building a blog and users can enter their own content they might add s from anywhere not just youtube.

[@PaperKrane]

You could write a small script (JavaScript) that detects/parses common embed sources (ie KZbin, SoundCloud, TikTok etc) and then adjust the padding dynamically. For example set the padding bottom to 177% for TikTok videos that are 9x16, 100% for SoundCloud then have a typical 56.25% fallback. I understand not wanting to specify the padding but s still don’t play well with responsiveness.

[@the_sophile]

divide the height by width and multiply by 100 to get the padding percentage. For example if the aspect ratio is 16:9, the padding percent is 9/16*100 = 56.25% as mentioned in the video.

[@KivaGordon]

It didn't work for my KZbin any reason why?

[@PaperKrane]

Kiva Gordon hmm. Mind sharing your code snippet you used?

[@patzmusic]

Thank you so much!! you made my day!

[@Littlemouse_]

So this doesn't work if you have an created on your laptop :/

[@PaperKrane]

s aren’t device specific unless you are using an old browser. Can you please specify the issue?

[@irvingminguer5436]

Muchs gracias hermano, me ayudaste demasiado!!

[@goEnglishTalkZone]

Thank you, bro🤗

[@akuamtau]

very helpful thanks for this!

[@machadoviewer]

Thank you pal. It helped me a lot!

[@ikram1125]

Excellent bro...........

[@cefbanquetfiles3317]

thank you for this tutorial!

[@DashaG182]

Awesome! Thanks a lot

[@jenniferswift6491]

Thank you!

[@artizon_j]

Thank you very much!

[@oneanime9897]

Source code please

[@joebiggs7054]

I love videos where the resolution is so shitty you cant read any of the text. Brilliant.

[@PaperKrane]

Joe Biggs maybe check your is bandwidth. It is in HD.

[@joebiggs7054]

Im pulling 256mbps. Idk why i cant adjust it then.

[@PaperKrane]

That is really strange. Don't know what it could be.

[@vaibhavblayer]

thankyou, it helped me a lot

[@kevinblakely4384]

I love you !!!!!!!! Thanks

[@CarlosYounes]

BRAVO! THANKS! Best Regards. :)

[@manjunathkottarki1092]

it wont work....

[@СергійЩербина-г4щ]

it works, thanks

[@Lucao477]

Thanks a lot

[@paladintaekwon-do4953]

didnt work in joomla

[@ArtfulUI]

thank you!

[@김미슉-m1e]

Thanks

[@Usamakhan-ic5ft]

thanks bro

[@trenton9]

I'm shook.

[@eliuespinoza4016]

Wasting time!. My link a photo gallery design from a table in mysql

[@cleanandquick7051]

KZbin embeds are easy with wordpress.

[@needlesky]

Thanks a lot.