Landing page, iframe responsive problem

Hello, I have problem with setting height of iframe to look like basic youtube rectangle. I seek for solution, I found lots of videos where exactly this what I do works perfect but in my code height of iframe is 100%? How to fix it?

https://codepen.io/des3000/pen/jObaEde

You will need to set a specific height for the iframe style. You can do it inline like this - <iframe style="height:400px"></iframe> or by adding a class or id.

In style sheet iframe height is set 100%. You should try to change it.

When I will set pixel height it wouldn’t be responsive? I set height: 100%; because that was on youtube tutorial where it work perfect (https://www.youtube.com/watch?v=QG7JQkeaJy4). There is no better way to set height somehow different? Something like auto, max-height?

Hi, I have checked your tutorial. In the tutorial the iframe wrapper div has a padding-top which is keeping the aspect ratio consistent everywhere. Also the iframe is absolute positioned within the wrapper.