changing YT embed size, Please help, I am very new to HTML Options

[gatorworld]

Hello, I need to resize this youtube embed. I am very new to HTML

I fixed the width. It is looking right on all devices, but the height is squished. What should I do to fix this?



Thanks in advance

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/wvNH28d3NN8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[pandy]

100% height doesn't work the way you think and even if it did the clip would be distorted.

Stick to pixels and keep the original aspect ratio. The size google suggests is that's 560x315 so you could use for instance 1120x630.

[gatorworld]

100% height doesn't work the way you think and even if it did the clip would be distorted.

Stick to pixels and keep the original aspect ratio. The size google suggests is that's 560x315 so you could use for instance 1120x630.

I got it to work with this html and CSS, added another div

<div class="iframe-container">
<iframe max-width="100%" max-height="auto" src="https://www.youtube.com/embed/wvNH28d3NN8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

---

.iframe-container{
margin-top: 30px;
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}