Como insertar un vídeo RESPONSIVE de YouTube a PrestaShop 1.7

En PrestaShop 1.7 tenemos la opción de insertar vídeos en la pestaña de productos. Para ello, primero debemos ir a parámetros de la tienda -> configuración; y activar la opción “Permite iframes en los campos HTML”.

Como insertar o incrustar un vídeo RESPONSIVE de YouTube a PrestShop 1.7

Una vez hecho esto, nos vamos a la pestaña del producto que queramos añadir un vídeo y seleccionamos la opción “insertar vídeo”:

insertar video

 

El siguiente paso es copiar el código embled de YouTube y meterlo ahí en la pestaña “incrustado” añadiendo delante del código la siguiente línea: <div class=”video-responsive”>

De esta manera, quedaría así, el width y el height se puede poner a gusto del consumidor.

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

El paso final es añadir un código en el Custom CSS para hacer los vídeos responsives:

Meteríamos esta línea:

/* VÍDEOS */
.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}

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

Esto sería todo, espero haberme expresado bien.

consultor seo

Manuel Espejo

Programador web & SEO Manager apasionado de PrestaShop 1.7 y del comercio electrónico en general. Desde mi blog escribo lo que voy aprendiendo por el camino y me parece interesante. https://manuel7espejo.com/

Deja un comentario

Don`t copy text!