Cómo Insertar Vídeos Adaptables con el Módulo Responsive Iframe para PrestaShop

Categorias: PrestaShop

Cómo Insertar Vídeos Responsives con el Módulo Responsive Iframe para PrestaShop

Desde PrestaShop es posible insertar vídeos desde Youtube en las descripciones de los artículos por medio de iframes. El problema es que no se adaptan al tamaño de la pantalla y en algunos casos se ven cortados o no se ven. Con el módulo gratuito «Responsive Iframe» solucionaremos esto sin tener que configurar nada más.

Insertar o incrustar vídeos en PrestaShop es algo relativamente sencillo, ya que el gestor de contenidos está preparado para ello.

El problema que podemos encontrarnos es que los vídeos se insertan en iframe, una forma de mostrar parte de una web en otra distinta y el iframe o marco que añade PrestaShop no es «responsive».

Responsive significa que se el contenidos se adapta a cualquier pantalla en la que se visualice.

Hoy en día, nuestra tienda online puede visitarse desde distintos dispositivos con pantallas de muy diferentes tamaños. Un ordenador, un teléfono móvil, una tablet, etc…

Eso significa que el contenido que mostremos tiene que poder verse bien en cualquiera de estas pantallas, tienes que ser adaptable y a esto se le conoce como responsive.

La mayoría de las plantillas que nos encontramos en PrestaShop ya son adaptables a cualquier dispositivo o tamaño de pantalla.

Si quieres probar si tu platilla es responsive, es muy sencillo. Abre tu PrestaShop en cualquier navegador y modifica el tamaño de la pantalla del navegador.

Si el contenido se adapta para que siempre sea visible, aunque cambie la disposición de los elementos, significa que es responsive.

Si hay elementos se «pierden» o dejan de verse enteros no lo es y esto es justo lo que le pasa a los vídeos incrustados en PrestaShop como iframe, como puedes ver en la siguiente imagen:

video iframe no adaptable - PrestaShop

En la captura de pantalla se puede apreciar que, al reducir el tamaño de la ventana, no es posible visualizar parte del vídeo incrustado en un artículo en PrestaShop.

Para solucionar esto se puede modificar el CSS de nuestra plantilla, pero eso es algo que requiere de ciertos conocimientos técnicos y no está al alcance de todo el mundo.

existe un módulo gratuito que consigue convertir en responsive todos los datos iframes que añadamos en nuestro PrestaShop y sin tener que modificar, ni configurar nada en PrestaShop.


Hosting Genérico


 

Módulo Responsive Iframe para PrestaShop

El módulo Responsive Iframe está disponible de forma gratuita y ha sido creado por un desarrollador externo, por lo que tienes que descargarlo desde su sitio web, haciendo click aquí.

descargar modulo responsive iframes - PrestaShop

La descargar es gratuita y puedes descargarlo como invitado, aunque necesitarás añadir una cuenta de correo.

Una vez finalices el proceso de compra, se genera una factura de 0 €, te llegará un email, desde el cual puedes descargar el archivo comprimido con el módulo.

email responsive iframes - PrestaShop

Una vez tengas descargado el módulo, no hay que descomprimirlo, ya que PrestaShop instala los módulo comprimidos con .zip.

La instalación de módulos en PrestaShop es muy sencilla, tan sólo tenemos que acceder a Personalizar > Módulos > Module Manager.

PrestaShop 1.7 - Instalar Módulo

Una vez accedas a la sección indicada, hay una opción en la parte superior desde la que podemos subir un módulo.

Los módulos en PrestaShop se suben comprimidos en formato .zip, así que sólo hay que buscar el archivo comprimido del módulo que hemos descargado y subirlo, PrestaShop hará el resto.

aviso modulo instalado - PrestaShop

El módulo instalado tiene una página de configuración, pero realmente no encontraremos mucho que configurar, más que una opción para activar el modo panorámico e información sobre el desarrollador del módulo.

responsive iframes configuracion - PrestaShop

Ahora sólo quedaría probar si funciona correctamente. Podemos utilizar la misma pantalla y con el mismo vídeo que en la prueba anterior y ver las diferencias.

video iframe responsive - PrestaShop

En la última captura se puede observar que el vídeo si que aparece entero, mientras que en la primera captura que hemos mostrado en el artículo, esto no ocurría así.

El módulo funciona perfectamente y hace exactamente lo que dice, lo que nos puede ahorrar muchos quebraderos de cabeza y además es gratuito, al menos por ahora.

Hosting PrestaShop con IP Española para tu Tienda Online

Hosting PrestaShop