ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

Cómo hacer que los vídeos tengan un diseño Responsive en WordPress

27 diciembre, 2013 por Pedro Mendez Deja un comentario

Cuando embebemos un vídeo en Wordpress, estos por defecto no son responsive (o sea no se adaptan a cada tipo de pantalla). Los usuarios que van a visitar nuestro sitio con pantallas más pequeñas verán el formato del vídeo estirado y desproporcionado. En esta entrada vamos a ver como dejar los vídeos con formato responsive para wordpress con la herramienta de FitVids.

Video Responsive

FitVids es un plugin para jQuery que permite dejar un vídeo embebido con formato responsive. Si tienes pensado utilizarlo en tu sitio de WordPress, entonces todo lo que necesitas hacer es instalar y activar el plugin para WordPress FitVids. Después de la activación, tiene que ir a Apariencia – FitVids e introducir una clase de selectores CSS. WordPress añade de forma automática .post class en los artículos, por lo que solo es necesario hacer eso.

fitvisds plugin

Eso es todo, guarda los cambios y visualiza una vista previa del sitio web. Ahora debemos cambiar el tamaño de la pantalla del navegador para ver los vídeos ajustarse a la pantalla.

Añadir de forma manual FitVids para hacer tus vídeos responsive en WordPress.

Si no quieres instalar el plugin de FitVids para WordPress, entonces podemos incluir el jQuery Plugin de FitVids manualmente. Lo primero que tenemos que hacer es descargar y extraer el plugin jQuery de FitVids en nuestro PC. Ahora necesitas cargar la carpeta FitVids.js-master en el directorio js de tu tema.

Es necesario conectar con tu sitio web mediante un cliente FTP como Filezilla y abrir el directorio de themes. Es posible que tu tema de WordPress no tenga una carpeta js. Si no está, necesitamos crear una carpeta y luego subir FitVids.js-master de nuestro equipo.

Dentro de la carpeta js, es necesario crear un nuevo archivo con el nombre de FitVids.js . Edita este archivo y pega este código en su interior.


(function($) {
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(".post").fitVids();
  });
  
  })(jQuery);

El código anterior le indica a FitVids buscar el .post class de selectores CSS. Ahora que tienes FitVids listo, es hora de agregar correctamente el javascripts en tu plantilla de WordPress.

Solo es necesario copiar y pegar el siguiente código en tu theme, en el archivo functions.php (Si quieres conservar todos los cambios de tu plantilla cuando instales otra sin perder funciones, échale un ojo a este artículo:

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);

Una vez que hemos realizado lo anterior, ya debemos de tener nuestros vídeos en Wordpress con formato responsive.

Para cualquier duda o sugerencia puedes comentar a continuación o a través de las redes sociales.

..Entradas Relacionadas

  • Los Mejores Plugins de Videos en Productos de Woocommerce
  • Los Mejores Plugins de MailChimp para WordPress Gratuitos
  • Como Crear un Widget Flotante en el Sidebar de Wordpress
  • 4 Plugins WordPress para Incluir Noticias de los Mercados Financieros
  • Video Marketing: Errores que debes evitar

Publicado en: Wordpress Etiquetado como: fitvids, plugins, responsive, videos

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (510)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)