Muchas veces cuando descargamos algún tema de WordPress o estamos creando el nuestro propio sucede que los videos insertados mediante iframe sean de Youtube, Vimeo u otro gestor externo no se muestran como queremos y es donde empezamos a padecer y no sabemos por que solución optar ya que en internet conseguimos muchas soluciones que por lo general son momentáneas. Hoy les traigo este plugin FitVids.js el cual nos permite hacer de manera optima que todos nuestros videos sean responsive, este plugin fue realizado por Toddmotto Front-end y Developer Expert.
Como agregarlo a nuestro tema WordPress.
Una manera de agregarlo es por medio de un plugin, ya que este esta disponible en el repositorio de WordPress y lo podemos encontrar como Fluidvids for WordPress.
Una de las maneras de agregarlo a código en WordPress es por medio de nuestro archivo functions.php el cual se encuentra en el directorio raíz de nuestro tema por defecto, añadimos las siguientes líneas de código:
if ( ! function_exists( 'scripts_js' ) ):
function scripts_js() {
wp_deregister_script('jquery');
wp_enqueue_script('fluidvids', get_template_directory_uri() . '/js/fluidvids.min.js', array(), '1.0','all');
}
endif;
add_action('wp_enqueue_scripts', 'scripts_js');
La función que observaron anteriormente es una de las manera con las cuales podemos agregar un archivo .js a nuestro tema, como verán aquí solo hay que remplazar en la línea 5 la url del directorio donde se encuentra el archivo fluidvids.min.js
Otra forma es agregar todo el código que viene incluido en el archivo fluidvids.js en un script en el footer.php antes de cerrar nuestra etiqueta body.
...
<!-- Responsive Video -->
<script>
!function(a,b){"use strict";for(var c=b.getElementsByTagName("iframe"),d=0;d<c.length;d++){var e=c[d],f=/www.youtube.com|player.vimeo.com/;if(e.src.search(f)>0){var g=100*(e.height/e.width);e.style.position="absolute",e.style.top="0",e.style.left="0",e.width="100%",e.height="100%";var h=b.createElement("div");h.className="video-wrap",h.style.width="100%",h.style.position="relative",h.style.paddingTop=g+"%";var i=e.parentNode;i.insertBefore(h,e),h.appendChild(e)}}}(window,document);
</script>
</body>
</html>
Y de esta manera tendremos videos responsives en toda nuestra página web.
No olvides dejar tu comentario.
Recibirás cada semana todas nuestras actualizaciones
Puedes estar tranquilo que nunca te enviaremos SPAM
SOBRE EL AUTOR
Andres Vega
Freelancer del mundo web y WordPressero ya hace más de 9 años creando desarrollos custom para clientes, bloguero de profesión para ayudar a nuestra comunidad, runner en la ciudad que me encuentre. Me interesé por la tecnología desde que mi papá trajo a casa la primera computadora que fue como abrirme la puerta a un mundo nuevo que todavía sigue en desarrollo. Soy de Colombia pero ahora vivo en Montreal comiendo Poutine y disfrutando de sus temperaturas bajo cero.
