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.


Tenemos diferentes tipos de hosting, selecciona uno:


 

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 especializado en Prestashop con discos SSDPrestashop 1desde4´38€ / mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 2desde5´54€ / mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 3desde8´34€ / mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 1desde4´38€/mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 2desde5´54€/mes
  • Hosting especializado en Prestashop con discos SSDPrestashop 3desde8´34€/mes
    • Almacenamiento en disco duro ultra rapido SSDAlmacenamiento en disco duro ultra rapido SSDAlmacenamiento en disco duro ultra rapido SSDAlmacenamiento en disco duro ultra rapido SSD
    • El espacio en disco es la suma del espacio que ocupan los archivos que forman la web y el correo electrónico.
    • La transferencia de datos mensual es la cantidad total de información que se descargan los visitantes de nuestra web en cada acceso más nuestro uso a través de FTP y correo.
    • Ideado para sacar el máximo partido a tu Prestashop
    • Aumenta la velocidad de tu web + Info
    • Tras evaluación de nuestro equipo de migraciones
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Elige la versión de PHP que necesites
    • Certificado SSL autofirmadoCertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUICertificados Let's Encrypt. Mas Información AQUI
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Migramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a HostinetMigramos tu web de tu actual host a Hostinet
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web
    • Hosting específicamente preparado para sacar el máximo rendimiento a tu Prestashop
    • Contrata tu hosting web y consigue dominios gratisUna vez dado de alta tu alojamiento web, recibirás los vales correspondientes para registrar nuevos dominios .ES, .COM, .INFO, .NET, .ORG ó .EU.
    • Cada dominio alojado muestra un contenido único y diferente del resto
    • Aparcando un dominio secundario en el alojamiento de nuestro dominio principal conseguimos que ambos dominios resuelvan indistintamente con la misma página que tenemos colgada.
    • Cuentas de correo gestionables a través de POP, IMAP y servicio Webmail
    • Tus buzones de correo y mails limpios de virus y con un potente filtro antispam
    • Centro de datos en Madrid (España)
    • Opción de contratación de IP dedicadaPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUIPuedes contratar tu Ip dedicada por solo 11.95 € al año AQUI
    • Opción de contratación de certificados SSL. Se requiere Ip dedicada.Puedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUIPuedes contratar tu certificado SSL por solo 14.95 € al año AQUI
    • Bases de datos MySQL disponibles para su uso en cada alojamiento web
    • ¿Quieres realizar desarrollos con Python? En Hostinet innovamos dia a dia en tu beneficio y por ello te presentamos como última novedad en todos nuestros servidores Web la posibilidad de desplegar tus aplicaciones con Python directamente desde el cPanel de tu Hosting.
    • ¿Quieres desarrollar tus aplicaciones con Ruby? En Hostinet te presentamos como última novedad en todos nuestros servicios de Hosting Web la posibilidad de desplegar tus aplicaciones con Ruby on Rails directamente desde el panel de control cPanel.
    • El fichero .htaccess permite modificar diferentes variables en la configuración de nuestra cuenta de alojamiento en el servidor.
    • El módulo mod_rewrite permite crear direcciones URL alternativas a las dinámicas generadas por la programación de nuestros sitio web (blog, foro, portal…), de tal modo que sean más legibles y fáciles de recordar
    • Te ayudamos vía email y teléfono en todas tus consultas sobre hosting web. Soporte en español por personal de Hostinet.
    • Completa recopilación de tutoriales sobre Hosting, Dominios y Prestashop
    • 30 dias para probar tu servicio de Hosting y si no te convence el servicio... te devolvemos el dinero!!