Iframe height proprtionation issue

[codeispoetry]

<div class="iframeholder">
	<iframe class="iframe" title="Super Hot Sunny Mornings | Lower Body Conditioning | Sunny Leone" src="https://www.youtube.com/embed/jynQQcn2NJk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" style=""></iframe> 
</div>

Hi there, I am using this CSS, and I was expecting that the height of the youtube audio should enlarge on its own.

.iframeholder        {position:relative;}
.iframeholder iframe {position:absolute;width:100%; height:auto;}

But the video is not expanding proportionally to height:

[rpkamp]

Have a look at https://www.ankursheel.com/blog/full-width-you-tube-video-embed

[PaulOB]

@codeispoetry

Hi there, I am using this CSS, and I was expecting that the height of the youtube audio should enlarge on its own.

It’s the vertical padding (padding-top or padding-bottom) that creates the aspect ratio and you don’t have any padding in that rule so the height is basically zero. Once you have set the correct amount of padding then you then need to set the width and height of the iframe to 100% to make it fill that area.

The amount of padding that you add is the trick to create the aspect ratio as percentage padding is based on the width of the containing block. For 16:9 aspect ratio the amount of top padding is 56.25%;

[rpkamp]

@PaulOB

For 16:9 aspect ratio the amount of top padding is 56.25%;

If anyone wonders why, it’s because 9 is 56,25% of 16.

So if you have a video with aspect rate 16:10 say, then it would become (10/16) * 100 = 62,5%

Or generally, if you have a video with an aspect ratio of X:Y then the padding needs to be (Y/X) * 100 %

[codeispoetry]

@rpkamp

If anyone wonders why, it’s because 9 is 56,25% of 16.

Thanks for directing the focus there.