LINUX GNU BLOG

Software libre y diseño web
Mar082016

Como reproducir he insertar vídeos HTML5 en plantillas Bootstrap

vídeos HTML5 Bootstrap

Hace poco, enuncié en Twitter que todos los vídeos de nuestro blog se reproducían en HTML5 sin necesidad de Flash. Fue un trabajo realmente laborioso, pues tuve que editar todos los posts que incluían vídeo. Terminé agotado, pero muy satisfecho por el paso que habíamos dado.

Nuestro template es de diseño propio y en su momento como base optamos por Bootstrap, gracias a ello hemos podido avanzar en su desarrollo sin grandes inconvenientes, creo que fue todo un acierto.

Implementar esta función es muy fácil, basta con editar nuestro archivo function.php y añadir la función “short_code_embed_responsive“. Antes de hacerlo, comprobad que vuestro template no la tenga implementada.

 

function short_code_embed_responsive( $atts, $content = null ) {

$aspect="16by9";

if ($atts['aspect'] == "4:3")
$aspect = "4by3";

$html = '<div class="embed-responsive embed-responsive-'.$aspect.'">
<iframe class="embed-responsive-item" src="'.$atts['src'].'"></iframe>
</div>';

return $html;
}
add_shortcode( 'embed-responsive', 'short_code_embed_responsive' );

 
Ahora solo nos queda insertar los vídeos de la siguiente forma, las “xxxxxxxx” se refieren a la identidad del vídeo.
 
Para Youtube:

[embed-responsive src="http://www.youtube.com/embed/xxxxxxxx" aspect="16:9" allowfullscreen="allowfullscreen"]

 
Para Vimeo:

[embed-responsive src="https://player.vimeo.com/video/xxxxxxxx" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen aspect="16:9"]

 
Esto es todo amigos, espero que se animen a sustituir flash por html5. 😉

Política de comentarios

Dada la importancia de los comentarios como espacio de participación, te pedimos por favor que leas detenidamente y cumplas con las siguientes normas de participación.

Deja un comentario

Tu dirección de correo electrónico no será publicada.