Hacer que los videos de WordPress sean responsivos

Desafotunadamente WordPress no hace que los videos sean responsivos automáticamente. Para realizar esto, son necesarios dos pasos.

Primero hay que añadir este código en el archivo functions.php:

/* Add responsive container to embeds
/* ------------------------------------ */ 
function alx_embed_html( $html ) {
 return '<div class="video-container">' . $html . '</div>';
}
 
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

Y luego, agregar los estilos CSS correpondientes en el archivo style.css:

.video-container { 
   position: relative; 
   padding-bottom: 56.25%; 
   height: 0; 
   overflow: hidden; 
}
.video-container iframe, .video-container object, .video-container embed, .video-container video { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
}

Eso es todo.

Fuente: Axl Media


Entradas relacionadas

Comentarios

Loading Facebook Comments ...

No Comments Yet.

Leave a Comment

No Trackbacks.