Cómo publicar vídeos de youtube de manera responsive en Wordpress

Queremos compartir la solución que hemos encontrado para publicar vídeos de youtube incrustados en una entrada de nuestro Wordpress de manera responsive sin usar plugins ni short codes.

El problema

Al diseñar una página web responsive para WordPress, un problema con el que nos podemos encontrar son los vídeos incrustados. Si no creamos estilos específicos para ello, los vídeos tienen un ancho fijo que nos romperá el diseño adaptable.

La solución

La solución es envolver el vídeo en un DIV con una clase y asignarle estilos con CSS, es muy sencillo, tan sólo hay que añadir este código en vuestro fichero CSS:

Código CSS

.video-responsive {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

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

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}

Ahora lo único que hay que hacer es aplicarle la clase .video-responsive con un div:

Código HTML

<div class="video-responsive"> Código del vídeo incrustado </div>

Un ejemplo con un vídeo de YouTube:

<div class="video-responsive">
<iframe width="560" height="300" src="https://www.youtube.com/embed/Nr72D-DMSo0" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

Como ejemplo hemos utilizado un vídeo de YouTube por ser lo más habitual, pero funciona con cualquier otro tipo de vídeos: Vimeo, SlideShare…

Esperamos que esta información te sea de utilidad. Si te ha gustado háznoslo saber en los comentarios y danos 5 estrellas 😉

Si necesitas que te ayudemos a configurar algo en tu web, ponte en contacto con nosotros.