Make YouTube Video Responsive With Flexbox

Hey guys. Need a little help here. I have nearly completed my “Product Landing Page” and is trying to make it responsive. When I view it on mobile devices, the embedded YouTube video is too large and not responsive. I googled on making YouTube video responsive, and every article is suggesting the same code. When I try to implement that code, it’s even worse. Now, the question is, is it because of flexbox that I can’t make my video responsive? My project is completely based on the flexbox. Any help will be greatly appreciated.

My project link:

One thing you can do in a mobile is to use overflow:scroll;
This is a hack. This doesn’t solve your problem. But provides an alternative solution.
There may be more better solutions than this.

1 Like

Hi @krishnasai3cks. Thanks for replying. But I don’t want to have a scrollbar. Instead, I want it to scale it according to the screen size.

<iframe width="100%" id="video" height="475" >

This is what I did in my project and it worked very nicely

1 Like

Hi @krishnasai3cks. Thanks for your reply. But, your code made my video even smaller!

1 Like

try adding these to your flex container of video
width: auto; justify-content: space-around;

1 Like

Thanks for your answer @mdshariq. But it does’nt work :sob:

i saw your work . It’s pretty dope. Try this:

#video {
width: auto;
}

(at around 153 something line)
#video is the id of your iframe.
I also tried other values instead of other auto and those work too.
I also tried by deleting the height and width from the iframe tag and added those in the css section which worked to.
hope this helps.

1 Like

Hello @ameenarab5. Where should I add this code? Inside media rules or outside it? Also, should I delete the width and height attributes of the iframe?
Thanks.

well, I added them at the at the video id which is on line 153 of your project on codepen .
also I would suggest you try both
first delete the height and width from html and if something goes wrong let them be and just add in the css too

1 Like

Hey @ameenarab5. It worked! But, when I added it to the line you mentioned, it’s width became too small on desktop also. So, I added it inside media rules and it worked perfectly and the video is now responsive! Thanks for your kind help. May you have a good day!

welcome and thank you for sharing additional knowledge.
also I would like to suggest to use em and rem more as they are responsive units.

1 Like

Ok I will use em and rem on my next projects :grinning: