Avisos
Vaciar todo

El video insertado en wordpress se queda estático en versión móvil

12 Respuestas
3 Usuarios
0 Reactions
34 Visitas
Mariajose
Respuestas: 44
Eminent Member
Topic starter
 

Hola, estoy tratando de adaptar dos mini videos que he insertado en wordpress, he conseguido adaptar el tamaño y que sea responsive, pero cuando abres el post en versión móvil, los videos aparecen como foto fija. ¿Hay alguna forma o código css o html dentro de la misma caja del video, que permita la reproducción en bucle de los videos en formato movil que sí funcionan en formato sobremesa?

 

Este es el código que he creado para la inserción del video:

 

<video autoplay="autoplay" loop="loop" muted="" width="100%" height="auto">
<source src="https://drabrand.com/wp-content/uploads/2022/05/creacion-de-marca-personal-dra-brand.mp4" type="video/mp4" /><span style="display: inline-block; width: 0px; overflow: allow; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>&nbsp;

</video>

 

 

Os dejo enlace al post concreto para que podáis ver los videos, están al final.

Contenido solo visible a usuarios registrados


 
Respondido : 03/05/2022 5:57 am
Tags del tema
Pepe
 Pepe
Respuestas: 41122
Illustrious Member Admin
 

Hola maria Jose.

Prueba con lo siguiente:

<video autoplay="autoplay" loop="loop" muted="muted" width="100%" height="auto">

Lo unico que hemos realizado es silenciar el sonido con " muted="muted" "

De todas formas veo que es una imagen que solo cambia de fondo y colores, ¿ no crees que seria mejor una imagen Gif ? ocupara menos y no tendras problemas de carga.

Te dejo la imagen en formato gif:

ezgif.com gif maker

 

Un saludo

 


 
Respondido : 03/05/2022 9:03 am
Mariajose
Respuestas: 44
Eminent Member
Topic starter
 

@pepesoler Lo probé como dijiste y si funciona. Lo del gif es verdad, tienes razón... En ese caso el código cambia no?


 
Respondido : 03/05/2022 12:26 pm
Karen Rios
Respuestas: 18675
Illustrious Member Moderator
 

Hola Maria Jose, 

Enhorabuena ha funcionado 😀 , l código lo que hace es añadir que el video se reproduzca de forma automática, con respecto al gif es correcto, el código cambia porque lo que insertarás sería una imagen, actualmente WordPress tiene opciones para añadir la imagen directamente;

image
image

Sin embargo, si deseas añadirla con código, lo primero es que subas la imagen gif a tu librería de medios, luego que la tengas en tu Liberia de medios, abre la imagen, copia la url y guárdala para usarla posteriormente, una vez tengas la URL debes añadir el siguiente código donde deseas aparezca la imagen

<img class="alignnone size-medium wp-image-258845" src="URL DE TU IMAGEN" alt="" width="600" height="600" />

Verifica si con esto puedes modificar lo que necesitas

Un Saludo

 

 
Respondido : 03/05/2022 12:44 pm
Mariajose
Respuestas: 44
Eminent Member
Topic starter
 

@karen Hola, Pues resulta que el video dejó de funcionar jaja no sé qué pasó. En Pc sí se ve pero en móvil no.

He puesto este código...

 

<video autoplay="autoplay" loop="loop" muted="muted" width="100%" height="auto"><source src="https://drabrand.com/wp-content/uploads/2022/05/creacion-de-marca-personal-dra-brand.mp4" type="video/mp4" /><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>

</video>

 

Supongo que está mal?

Ya me dices!


 
Respondido : 05/05/2022 1:21 pm
Pepe
 Pepe
Respuestas: 41122
Illustrious Member Admin
 

Hola Maria Jose.

Pues tendría que funcionar.

Prueba con esto:

<video autoplay loop muted playsinline>

 

De todas formas sigo pensando que la mejor solución es que utilices una imagen gif en vez del video.

 

Un saludo

 

 


 
Respondido : 05/05/2022 2:14 pm
Mariajose
Respuestas: 44
Eminent Member
Topic starter
 

@pepesoler no, lo único que hace es reducir el video, lo del gif tienes razón pero no encuentro el psd original, de momento lo tengo que hacer con el video.


 
Respondido : 06/05/2022 7:40 am
Mariajose
Respuestas: 44
Eminent Member
Topic starter
 

@pepesolerya esta jejeje convertí el archivo mp2 a gif y puse vuestro código. Gracias Mil!


 
Respondido : 06/05/2022 7:56 am
Mariajose
Respuestas: 44
Eminent Member
Topic starter
 

@karen Bien, ¿Se podría hacer que la medida fuera adapatativa?


 
Respondido : 06/05/2022 8:00 am
Pepe
 Pepe
Respuestas: 41122
Illustrious Member Admin
 

Hola Maria Jose.

Veo que se adapta a la resolución del Mobil.

Archivo 000 (10)

A que te refieres con adapatativa ?

 

Un saludo

 


 
Respondido : 06/05/2022 8:22 am
Mariajose
Respuestas: 44
Eminent Member
Topic starter
 

@pepesoler Hola, perfecto, pues mejor subo un gif, pero entonces cuál sería el código para que la animación vaya en loop?


 
Respondido : 15/07/2022 1:54 pm
Pepe
 Pepe
Respuestas: 41122
Illustrious Member Admin
 

Hola Maria Jose.

El Gif carga en bucle solo tienes que cargar la imagen y en tamaño de la imagen seleccionar " Tamaño completo "

screenshot joomlero cp7004.webjoomla.es 2022.07.15 16 05 56

 

Un saludo

 


 
Respondido : 15/07/2022 2:07 pm