Insertar video YouTube de forma responsive en nuestra web

Publicada el por

Veamos cómo insertar video YouTube de forma responsive en nuestra web.

Los pasos para insertar el vídeo en nuestra web de forma responsive serían los siguientes:

1. Implementar CSS

Veamos las dos propiedades que necesitamos:

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

La primera clase, container, se la aplicaremos al div que contendrá el video. Para que sea responsive, la clave es el padding-top i el position: relative.

La segunda clase, se la aplicaremos al iframe del video que nos facilita YouTube. En el siguiente apartado se muestra como ejemplo:

2. Insertar el código del vídeo

Una vez tenemos definidas las clases, vamos a insertar el video. Tenemos un bloque div que contiene el video de YouTube:

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

Fijaos que el iframe tiene el class=»video». Aunque tiene asignado el width y height, se le aplicará las dos clases que haran que sea responsive.

3. Opciones de reproducción

Autoplay en video YouTube

Lo único que debemos hacer es añadir es ?autoplay=1 en el enlace del código que nos proporciona YouTube. De esta forma, el video se pone en marcha sin necesidad que el usuario le de al Play del reproductor.

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

Quitar el reproductor del video youtube

Otra de las opciones sería la posibilidad de quitar el reproductor que sale en la parte inferior (play, pause, stop…). Igual que en el ejemplo anterior, sólo hay que añadir un parámetro al enlace, en este caso ?controls=0

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

Y así podríamos seguir con muchas más opciones, pero eso os lo dejo a vosotros. Repasad la API de YouTube y podréis adaptar el video a vuestras necesidades.

4. Ejemplo en CodePen

See the Pen Youtube Video 100% width by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Este es un ejemplo sencillo que podemos complicarlo todo lo que queramos con las opciones que os hemos mostrado.

Espero que este ejemplo os muestre como insertar un vídeo youtube responsive en vuestra web.

Más información