El diseño web adaptable – temas capaces de ajustar el diseño de un sitio web al tamaño del dispositivo de un usuario – ha sido una gran incorporación a WordPress y a Internet en su conjunto, ofreciendo a los webmasters la oportunidad de dar servicio al siempre creciente número de usuarios de teléfonos inteligentes y tablets. Hemos hablado sobre el Diseño web adaptable e incluso hemos sugerido un par de temas de WordPress adaptables.
Desafortunadamente, si bien los temas son capaces de ajustarse al texto y las imágenes para satisfacer las necesidades de los usuarios, los vídeos suelen dejarse desproporcionados. Cuando incrustas un vídeo en tu sitio web, éste no es adaptable por defecto. Obviamente, esto está lejos de ser ideal, especialmente si dependes mucho del contenido en vídeo – tal y como es el caso de muchos usuarios de WordPress.
Por suerte, estamos hablando de WordPress, y con WordPress siempre existe una manera de eludir un problema. Para este problema en particular la solución se llama FitVids.
Instalar FitVids
FitVids, como probablemente ya habrás adivinado, es un plugin diseñado para hacer que la incrustación de vídeos sea adaptable. Para obtener el plugin tendrás que iniciar sesión en tu panel de control de WordPress, ir a Plugins > Añadir nuevo e introducir «FitVids para WordPress» en el campo de búsqueda.
Cuando hayas localizado el plugin, haz clic en Instalar ahora, seguido por Activar plugin cuando la instalación se haya completado.
Usar FitVids
Una vez FitVids esté activado, ve a Apariencia y desplázate hacia abajo hasta llegar a la opción FitVids recién creada. En esta página, sólo tienes que añadir un selector jQuery para que funcione el plugin. WordPress introducirá .post en el campo automáticamente y esto cumplirá tus requisitos.
No necesitas nada más que eso para guardar los ajustes y previsualizar tu sitio web. Para comprobar que los vídeos han sido redimensionados correctamente, visiona tu sitio web en varios tamaños de pantalla.
Instalar FitVids manualmente
Si prefieres no usar el plugin FitVids (no a todo el mundo le gusta sobrecargar su sitio web con plugins), también es posible realizar una instalación manual.
Para hacer esto, primero necesitarás descargar y descomprimir el plugin FitVids jQuery de GitHub.
Después, usando tu cliente de FTP preferido, accede a tu directorio de temas de WordPress y sube FitVids.js-master a la carpeta js. Si tu tema no tiene dicha carpeta, simplemente crea una y sube el archivo allí.
En la carpeta js, crea un nuevo archivo llamado FitVids.js y pega el siguiente código:
(function($) {
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(".post").fitVids();
});
})(jQuery);
Este código hará lo que la clase .post hace en el plugin.
Finalmente, en el archivo functions.php de tu tema elegido, pega el siguiente código para agregar javascripts y hacer que los vídeos sean adaptables:
wp_enqueue_script('fitvids', get_template_directory_uri() .
'/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE);
wp_enqueue_script('fitvids-xtra',
get_template_directory_uri() . '/js/FitVids.js', array(), '',
TRUE);
