Problema con codigo...
 
Avisos
Vaciar todo

Problema con codigo CSS para videos

8 Respuestas
3 Usuarios
0 Reactions
559 Visitas
Israel
Respuestas: 112
Estimable Member
Topic starter
 

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


 
Respondido : 20/03/2017 12:56 pm
Pepe
 Pepe
Respuestas: 41108
Illustrious Member Admin
 

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


 
Respondido : 20/03/2017 1:18 pm
Israel
Respuestas: 112
Estimable Member
Topic starter
 

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.


 
Respondido : 20/03/2017 1:36 pm
Johnny Heredia Montiel
Respuestas: 20131
Miembro
 

Hola,

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


 
Respondido : 21/03/2017 2:31 am
Israel
Respuestas: 112
Estimable Member
Topic starter
 

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.


 
Respondido : 21/03/2017 10:03 am
Pepe
 Pepe
Respuestas: 41108
Illustrious Member Admin
 

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


 
Respondido : 21/03/2017 11:22 am
Israel
Respuestas: 112
Estimable Member
Topic starter
 

Solucionado con ese codigo, mil gracias Pepe


 
Respondido : 21/03/2017 11:45 am
Pepe
 Pepe
Respuestas: 41108
Illustrious Member Admin
 

Hola Israel

Me alegra mucho que te sirviera :cheer:

Cerramos el tema.

Un saludo


 
Respondido : 21/03/2017 12:03 pm