Video responsive de YouTube y Vimeo con HTML y CSS

Cómo incrustar un vídeo de YouTube, Vimeo, en tu sitio web y tenerlo responsivo, para que se reduzca en un dispositivo móvil

· 1 min de lectura
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

Artículos Relacionados

Cómo utilizar window.confirm()
· 1 min de lectura
Como elegir una clave SSH para un host especifico
· 1 min de lectura
SVG generadores de patrones
· 1 min de lectura