Convertir iframes (youtube, vimeo, maps…) en responsive en Prestashop

Cuando, por ejemplo, editamos la ficha del producto desde la pestaña Catálogo -> Productos e insertamos un vídeo de youtube en la descripción del producto.

Recordar que debemos tener activado en la pestaña Preferencias -> Configuración -> Permite iframes en los campos HTML

Permitir iframe
Copiar enlace
Pegar enlace
Pegar enlace

Código iframe auto generado tras pegar el enlace del vídeo

Código iframe

Vídeo cortado

Vídeo cortado

El tamaño del vídeo no se va adaptando a la resolución de la plantilla, pero con un aporte del usuario Shacker de la Comunidad de Prestashop, podemos darle solución.

Vídeo responsive

La subida e instalación del módulo sin problemas desde la pestaña módulos -> módulos.

Módulo instalado

Para que funcione el módulo, debemos ir a su configuración y activar la opción -> Modo panorámico -> Sí

Configuración módulo

¿Dónde puedo descargar el módulo y discutir los problemas?

https://www.prestashop.com/forums/topic/553256-modulo-responsive-iframe-v11-ps-14151617/

http://catalogo-onlinersi.net/es/inicio/488-iframe-sensible.html

Descarga alternativa del módulo por si falla el enlace de descarga

Review construida en Prestashop 1.6

Añadir vídeo de youtube en la ficha del producto de Prestashop

Tutorial sobre Prestashop que permitirá añadir un vídeo de youtube dentro de la descripción del producto.

Primero paso, tener activado en la pestaña Preferencias -> Configuración la opción denominada:  Permite iframes en los campos HTML

Permite iframes en los campos HTML

Debemos tener la opción señalado en “Sí”

Segundo paso, editamos un producto cualquiera desde la pestaña Catálogo -> Productos y dentro del bloque de la descripción del producto hacemos clic sobre “Insertar vídeo” o directamente en el icono multimedia.

Icono multimedia
Menú -> Insertar vídeo

A continuación, nos aparecerá una ventana con el siguiente formulario:

Ventana para añadir vídeo

Por ejemplo, nos vamos a youtube, y vamos a insertar el siguiente vídeo:

Copiar URL Vídeo
Copiar URL Vídeo

Copiamos la url desde el navegador y la pegamos en la ventana que habíamos expuesto anteriormente en el campo “Fuente

Url pegada

Automáticamente nos generara el iframe. Si pincháis sobre “incrustado” veréis el código del iframe que va a insertar.

Código iframe vídeo youtube

Código que también podíamos haber copiado de forma manual desde youtube y pegado en la pestaña “Incrustado”

Obtener código iframe youtube – parte 1
Obtener código iframe youtube - parte 2
Obtener código iframe youtube – parte 2

Finalmente, veremos el vídeo de youtube en la descripción del producto.

Vídeo descripción producto

Documento actualizado hasta Prestashop 1.6

* Novedad -> Artículo actualizado para Prestashop 1.7

Activar Iframes -> Parámetros de la tienda -> Configuración

Botón insertar vídeos en la descripción:

Botón insertar vídeo en Prestashop 1.7

Visualización del vídeo en la ficha del producto

Vídeo en la descripción del producto de Prestashop 1.7

Reseña – Módulo para insertar un vídeo de youtube en Prestashop en los laterales

Lo primero de todo el autor del módulo es Slekweb y se trata de un módulo gratuito.

¿Qué hace el módulo?

El módulo nos permite insertar un vídeo de youtube por defecto en la columna izquierda de la tienda, aunque luego es posible dejarlo en otras posiciones, como la columna derecha.

Configurando módulo de Youtube para Prestashop
Configurando módulo de Youtube para Prestashop

Continúa leyendo Reseña – Módulo para insertar un vídeo de youtube en Prestashop en los laterales