Índice de contenidos
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».

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».

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

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:
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.
me aparece un letrero que dice YOUTUBE RECHAZO LA CONEXION
Buenos días Miguel Ángel,
Revisa que estés copiando el iframe o el vídeo «embebido» de YouTube.
Este es el texto a copiar
Déjame la URL vídeo de YouTube y hago una prueba si quieres.
¡Un saludo!
Hola Javier,
Si no tengo Avada, donde puedo agregar el código? Gracias
Hola Joe, el código lo debes insertar en el lugar donde quieras mostrar el video, bien sea una entrada o una página de tu web
Gracias, funcionó en mi blog perfectamente
Hola Javier.
Quisiera preguntarte cómo puedo eliminar los videos relacionados de un video de YouTube que puse en mi página web.
Utilicé el «rel=0» y funciona ok en Firefox, pero en Chrome no. Cu´la sería la solucioón para que no se vean videos relacionados en Chrome ??
Muchas gracias y aguardo tu respuesta por favor.
Saludos.
Hola Cristian
Viendo documentación parece que con &rel=0 no tendrían que salir videos relacionados, es raro que funcione solo en Chrome.
Si encuentras la solución, me dices 😉
¡Un saludo!