Video responsivo de Youtube en Prestashop  

 
Benigno A. Carvajal Fernandez
 Benigno A. Carvajal Fernandez
Reputable Member

Buenos dias, tengo un video a través de un Iframe en Html insertado en la web, se ve bien y lo puedo modificar y demás.. pero me gustaria que se adaptará de forma responsive a cualquier dispositivo.

Estoy intentando insertar este código que se indica en respuesta a este tema en el blog en otro apartado

<iframe style="width:100%; height: auto" src="ruta al vídeo...

Pero no consigo que funcione y se me ve el video con una linea horizontal pero no se ve bien..
me podeis ayudar??

Gracias!!

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 14/06/2017 10:32 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Benigno.

Tienes que realizar alguna modificaciones:

.- Añade el siguiente código a tu archivo css que utilices para las modificaciones que realices

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Una vez tengas esto para incrustar un video por ejemplo de youtube tienes que envolverlo dentro de un div con el estilo que le indicamos anteriormente, sería algo parecido a esto:

Como vera se envuelve el iframe con un div y la clase que creamos anteriormente '

'

Uun saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 14/06/2017 10:58 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Benigno A. Carvajal Fernandez
 Benigno A. Carvajal Fernandez
Reputable Member

Gracias por la ayuda Pepe,

La inserción del codigo con el Iframe la hago a través de un módulo de Hmtl del PRestashop en el que insertamos esde módulo en la zona de la web y ponemos el iframe.. Me podrías guiar un poco más con los cambios en las hojas de estilo que me indicas???
Gracias

ResponderCitar
Respondido : 14/06/2017 11:11 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Benigno.

Accede a la carpeta themes/tuplantilla/css y dentro de esa carpeta tendrás un archivo global.css, edita el archivo y añade los códigos del primer bloque que te pase para el archivo css.

Con eso ya tendrás creado el estilo para que el video pueda ser responsive. Ahora toca añadir el video indicando la clase que creamos anteriormente

y el código del iframe que tengas, esto dentro del módulo html que tienes en tu prestashop.

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 14/06/2017 11:28 am

Cursos Gratuitos WordPress

BOGDAN
 BOGDAN
Usuario activo

Hola Pepe,

tengo el mismo problema descrito por Benigno.
He intentado aplicar tu solución pero utilizo prestashop 1.7 - tema classic - y este no tiene archivo global.css, por lo tanto no tengo idea que archivo modificar y donde buscarlo.
Agradecería si pudieses ayudarme.

saludos

ResponderCitar
Respondido : 06/08/2018 10:05 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para PS 1.7 dentro de la carpeta de tu theme classic busca la carpeta assets allí deberías ver una carpeta css en la cual deberían estar el archivo o archivo .css a usar, usulamente sería theme.css puedes probar agregando código al final

Documenta esto porque perderás los cambios en una actualización.

Si tienes dudas adicionales mejor consulta en un nuevo hilo

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 06/08/2018 11:16 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación