Wordpress: hacer que los videos de YouTube y Vimeo sean responsivos

Como muchos se habrán dado cuenta estoy realizando muchos cambios últimamente en el blog, el mas grande e importante es que lo estoy haciendo Responsive, que se adapta a cualquier resolución de pantalla vamos.

Tan solo me había topado con un pequeño problema (de momento claro), resulta que los vídeos que utilizo de vez en cuando tanto de Youtube como de Vimeo no podía hacerlos líquidos ya que sus medidas son fijas pero gracias a webdesignerwall he conseguido una solución para salir del paso, y además solo con CSS, nada de JS.

Tan simple como añadir a nuestra hoja de estilos el siguiente cogido, simplemente copiar y pegar.

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

Después lo único que tenemos que hacer cada vez que queremos poner en un artículo un vídeo de Youtube o Vimeo es envolver el código que las plataformas nos proporcionan para embeber el vídeo con un div y su respectiva clase tal que así.

<div class="video-container"> Aquí el código de Youtube o Vimeo </div>

Simplemente con esto conseguimos que los vídeos de Youtube y Vimeo sean líquidos y se adapten a cualquier resolución de pantalla junto con el resto de la maquetación del site.

Ahora bien, a mi eso de tener que poner en el editor de WordPress un div con su respectiva clase se me hace grande, mas que nada por que seguramente la mayoría de las veces no me acordaría de que clase tengo que utilizar, así que para contribuir un poco con el código de webdesignerwall lo que hago es crear un shortcode que de forma automática me pondrá el código necesario, simplemente tengo que acordarme de la palabra del shortcode, así es mucho mas sencillo ¿verdad?

[youtube]Aquí el código de Youtube o Vimeo[/youtube]

Simplemente copia el siguiente código en tu archivo funtions.php y listo, cada vez que quieras embeber un vídeo de Youtube o Vimeo lo envuelves con el shortcode y el solo pondrá el div y su respectiva clase.

 

<?php
function videoyoutube($atts, $content=null, $code="") {
$return = '<div class="video-container">';
$return .= $content;
$return .= '</div>';
return $return;
}
add_shortcode('youtube' , 'videoyoutube' );
?>

Como muestra os dejo un vídeo de un ClinicSeo desde Vimeo y otro desde Youtube, estaría bien que los vierais que seguro que aprendéis cosas buenas.

Tomado de http://www.alnavirtual.es/youtube-vimeo-responsive/

“El que gana, gana. El que pierde, pierde” (Liliana Reyqui)

0 Comentarios