Video responsive de YouTube y Vimeo con HTML y CSS

El problema de incrustar videos de YouTube es que los iframes iframe necesitan recibir una altura y anchura exactas,  de lo contrario se verán mal.

Y tenemos que mantener las proporciones, basadas en la relación de aspecto de vídeo.

Para que un vídeo de YouTube se muestre responsivo en tu página, envuélvelo primero en un contenedor div:

<div class="video-responsive">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/eJ2NtSWQ5GM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

A continuación, agregue este CSS a su sitio:

.video-responsive {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-responsive::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

El vídeo debe ser de formato 16:9 (Horizontal, panorámico) - 9 es 56,25% de 16.

Si tu vídeo es 4:3 — por ejemplo, ajústelo al 75%.

Image: starline