Insertar un video de YouTube

Insertar un video de YouTube en una entrada de blog o una página web es una tarea sencilla.

El primer paso es acudir a YouTube y buscar el video a incrustar en nuestra web, ahora se debe pulsar en el botón de «Compartir».

Botón de compartir

Aparecerán varias opciones para compartir este video, en nuestro caso nos interesa insertar el video en formato HTML, para ello, hay que pulsar en la primera opción, en la de «Insertar».

Compartir video de YouTube

Ahora aparecerá el código HTML a pegar en la web donde se quiera incrustar el video.

iframe del video a insertar

Tan solo debes copiar y pegar el código anterior en donde se necesite, por ejemplo, el siguiente vídeo es el resultado de haber pegado el código HTML del iframe de la imagen anterior.

Pero este método tiene un par de problemas:

  • Centrar horizontalmente el contenido lleva un paso más.

  • En teléfonos móviles el video se va a cortar

Por suerte, con un breve retoque y de forma fácil, se pueden salvar estas dos inconveniencias.

CSS para hacer responsive un video de YouTube

Con un poquito de CSS se puede lograr que los videos insertados de YouTube sean responsive.

Primero se debe insertar este código, dentro del CSS personalizado de tu tema, si usas Avada, aquí te explico dónde insertar este CSS, si tienes alguna duda con tu tema, puedes dejar un comentario.

/* Start: Video Responsive */
.video-responsive {
    overflow:hidden;
    padding-bottom:400px; /* Adecua este valor para controlar la altura del video */
    position:relative;
    height:0;
}

.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/* End: Video Responsive */

Ahora, se debe envolver el código del iframe de YouTube en una capa «div», esta capa debe tener la clase de nombre «video-responsive» (la clase es la misma que la del CSS del código anterior).

El código resultante será como el siguiente:

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

Finalizando, al insertar este código en la entrada (junto al CSS en la parte correspondiente del tema), aparecerá un video como el siguiente:

Ahora se presenta un video que ocupa todo el ancho, está centrado, pero lo más importante, que es responsive, pudiendo ver siempre el contenido del video, independientemente de que se vea desde un móvil, tablet u ordenador.

Conclusión

Crear videos de YouTube responsive es un proceso sencillo y relativamente rápido de hacer, con un poquito de CSS y ligera variación sobre el iframe vamos a conseguir que los vídeos siempre se muestren correctamente, mejorando la experiencia de usuario de nuestra web.

¡Valora este artículo y ayúdame a mejorar la calidad del blog, si no te ha servido, déjame un comentario para revisarlo!
(Votos: 10 Promedio: 3.4)