Cómo insertar un vídeo responsive de YouTube en PrestaShop 1.7

Mucha gente prefiere subir los videos al hosting de la tienda en lugar de emplear una plataforma como YouTube o Vimeo. Eso está muy bien, pero hay problema: los vídeos consumen mucha transferencia de datos, así que corres el riesgo de llegar al límite.

Y, si llegas al límite de la transferencia mensual contratado en tu hosting, ya sabes que tu tienda dejará de funcionar correctamente. Así que utilizar YouTube es una opción que deberías considerar si quieres colocar vídeos en las fichas de tus productos.

Ahora bien, el método para insertar un vídeo de YouTube en PrestaShop 1.7 consiste en pulsar en el botón de Compartir en YouTube, y elegir la opción Insertar para obtener un código de iframe. A continuación, podrás personalizar el HTML para que el vídeo sea responsive, o bien utilizar un módulo que lo haga por ti.

Veamos ambas formas.

Formas de insertar un vídeo responsive de YouTube en PrestaShop 1.7

1. Personalizar el código iframe manualmente

Este código lo deberás copiar y pegar en Prestashop > Insertar / Editar Vídeo > Incrustar (antes, tienes que activar la opción Permite iframes en los campos HTML, en Configuración).

Primero tienes que escribir la línea:

<div class=”video-responsive”>

Y a continuación colocar el código del iframe (no olvides cerrar luego con </div>). El resultado quedaría parecido al siguiente:

<div class=”video-responsive”>
<iframe width=”900″ height=”511″ src=”https://www.youtube.com/embed/z27Xc6_oyWA” frameborder=”0″>
</iframe>
</div>

Como ves, esta opción te permite personalizar el ancho y el alto, así como añadir código CSS para conseguir el resultado visual que deseas a la hora de mostrar el vídeo en una ficha de producto en Prestashop.

Para añadir código CSS, lo que tienes que hacer es añadirlo en el Custom CSS utilizando la clase video-responsive, más menos como sigue (los valores que mostraré son ejemplos, pero deberían funcionarte a la perfección sin que tengas que hacerles muchos cambios):

.video-responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-left: 15%
}

Lo bueno es que, una vez hayas escrito el Custom CSS, todos los vídeos de YouTube que incrustes serán responsive, siempre y cuando te asegures de, al insertarlos, utilizar un <div> con la misma clase (que yo le he puesto video-responsive, pero que se puede llamar como quieras).

Ahora bien, la desventaja de este método es que no todos los vídeos tienen la opción de Compartir, ya que es algo que debe aprobar el creador. Pero esta es una limitación lógica que tienes que aceptar, sobre todo si se trata de un vídeo de un vídeo de marca.

2. Utilizar el módulo Responsive Iframe para Prestashop 1.7

El módulo Responsive Iframe te encantará, porque además de ser gratuito te permite hacer que cualquier iframe sea responsive, ya provenga de YouTube, Vimeo, Google Maps o cualquier otra parte. Así que le encontrarás más utilidades que insertar y hacer responsive en Prestashop 1.7 solamente vídeos de YouTube.

Para instalarlo, solo tienes que descargar el zip desde catalogo-onlinersi.net (sí, es un módulo desarrollado por un tercero), para luego acceder a Personalizar > Módulos > Module Manager en tu panel de administración y subir el zip. No hallarás mucho que configurar, salvo la opción de activar el modo panorámico si quieres.

La ventaja de usar este módulo es que no tendrás que escribir código HTML ni CSS de ningún tipo, ya que lo hace por ti. Y además funciona a la perfección, como podrás comprobar en cuanto lo instales.

¿Por qué tomarse la molestia…?

Como sabes, la mayoría de los usuarios navegan por Internet y realizan compras online a través de dispositivos móviles. Así que, si no haces que todo el contenido de tu tienda PrestaShop sea responsive, estás perdiendo puntos frente a tu público. Y eso, por supuesto, incluye los vídeos que coloques en las fichas de producto.

Además, es sabido que los motores de búsqueda más importantes hoy día (Google, Bing, Yahoo!, etc.) tienen muy en cuenta el diseño responsive, por la razón que te di arriba. Por tanto, se encargan de priorizar en los resultados de búsquedas aquellas webs que tienen un diseño responsive.

Esto es especialmente cierto para los vídeos. Brindar contenido audiovisual en tu tienda online es ya un plus de posicionamiento SEO. Pero si no te aseguras de que se visualice correctamente en todos los dispositivos, es muy probable que Google no se tome muy en serio los videos que subas.

¿Qué quiero decir con esto? Que si en tu tienda Prestashop tienes vídeos de YouTube, Vimeo, etc. en fichas de producto y no son adaptativos, debes cambiar eso ya empleando cualquiera de las 2 formas que te expliqué más arriba. Puede ser tedioso, lo sé, pero empezarás a ver cómo las estadísticas mejoran notablemente.

Ahora bien, si tienes cualquier duda sobre cómo insertar vídeos responsive de YouTube en Prestashop 1.7, no dejes de ponerte en contacto con nuestro equipo de profesionales. Desde Initcoms, hemos ayudado a muchos emprendedores y pequeñas empresas a despegar y alcanzar sus metas. ¡Y tú puede ser uno de ellos!