How to make YouTube embedding responsive while maintaining proportions with CSS.

Learn how to make YouTube embeds responsive while maintaining the ratio.

１：Add div tag.

Add a div tag to enclose the iframe tag.

<div class="yt"><iframe width="560" height="315" src="https://www.youtube.com/embed/YUDbl9qBihk?si=RRyI62O5tVSEfHvo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>

２：Add css.

Add the css.

.yt {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.yt iframe {
    width: 100%;
    height: 100%;
}

Finalise.

These are simple methods and we encourage you to try them.