Problema con codigo...
Avisos
Vaciar todo

Problema con codigo CSS para videos  

 
Israel
 Israel
Estimable Member

Hola buenos días, he creado un código en mi global.css para que me adapte el tamaño los videos cuando estoy viendo la página web desde un móvil.

Funciona porque en las versiones móviles me lo hace bien pero en las versiones de escritorio (tengo una tienda pero con multitienda) en una web me respeta el tamaño que yo le pongo http://www.prosoundcenter.com/pioneer-ddj-rb sin embargo en la segunda no http://new.profesionaldj.es/pioneer-ddj-rb, he de decir que el producto es el mismo para las dos tiendas por lo que el código en la descripción de ambas es el mismo.

¿Porque podría ser?

Os dejo el código que he puesto al final de los global.css de cada uno de los temas.

.video-container {
position: relative;
padding-bottom: 56.25%; /* Para que el contenedor tenga relación de aspecto 16/9 */
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Y el código para llamar al vídeo en la descripción:


Un saludo y gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 20/03/2017 12:56 pm
Pepe
 Pepe
Soporte CMS Webempresa Moderator

Hola Israel.

El código que muestras esta bien para mostrar el iframe.
¿ Lo añadiste en los archivos de estilos css de las dos tiendas ? aun que sea una multitienda cada una tiene sus archivos de estilos independientes y ese código tiene que estar en las dos.

Un saludo

ResponderCitar
Respondido : 20/03/2017 1:18 pm

Cursos Gratuitos WordPress

Israel
 Israel
Estimable Member

Si lo añadí en los global.css de cada theme ya que cada tienda tiene un theme diferente, la cosa es que copie y pegue el mismo código en ambos, en la versión móvil de ambos se ve en el mismo tamaño pero como podrás ver en la versión escritorio esto no pasa, ¿Porque podrá ser?

Gracias.

ResponderCitar
Respondido : 20/03/2017 1:36 pm
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Verifica si pegando dicho código en el modulo que te adjunto te funciona: https://dh42.com/blog/free-prestashop-css-module/

ResponderCitar
Respondido : 21/03/2017 2:31 am

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

Israel
 Israel
Estimable Member

Hola lo acabo de probar y sigue igual, la cosa es que el código funciona porque en el movil me lo adapta pero sin embargo en la segunda web, en la versión escritorio no hace ni caso al tamaño que le pongo del video. 🙁

Gracias por la ayuda.

ResponderCitar
Respondido : 21/03/2017 10:03 am
Pepe
 Pepe
Soporte CMS Webempresa Moderator

Hola Israel.

Ok, prueba el siguiente código en la web que no te carga, este codigo lo suelo utilizar y nunca me dio problemas.

En el archivo CSS:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Para añadir el Iframe:

Lo que veo es que el tamaño width es muy grande ' 1007' prueba a reducirlo con un tamaño de por ejemplo '600' que es mas que suficiente.

Un saludo

ResponderCitar
Respondido : 21/03/2017 11:22 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Israel
 Israel
Estimable Member

Solucionado con ese codigo, mil gracias Pepe

ResponderCitar
Respondido : 21/03/2017 11:45 am
Pepe
 Pepe
Soporte CMS Webempresa Moderator

Hola Israel

Me alegra mucho que te sirviera :cheer:

Cerramos el tema.

Un saludo

ResponderCitar
Respondido : 21/03/2017 12:03 pm

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