Avisos
Vaciar todo

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

 
Mariajose
 Mariajose
Usuario eminente

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

Citar
Respondido : 03/05/2022 6:57 am
Pepe
 Pepe
Soporte CMS Webempresa 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

 

ResponderCitar
Respondido : 03/05/2022 10:03 am

Mariajose
 Mariajose
Usuario eminente

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

ResponderCitar
Respondido : 03/05/2022 1:26 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa 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

 
ResponderCitar
Respondido : 03/05/2022 1:44 pm

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

Mariajose
 Mariajose
Usuario eminente

@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!

ResponderCitar
Respondido : 05/05/2022 2:21 pm
Pepe
 Pepe
Soporte CMS Webempresa 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

 

 

ResponderCitar
Respondido : 05/05/2022 3:14 pm

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

Mariajose
 Mariajose
Usuario eminente

@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.

ResponderCitar
Respondido : 06/05/2022 8:40 am
Mariajose
 Mariajose
Usuario eminente

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

ResponderCitar
Respondido : 06/05/2022 8:56 am

Cursos Gratuitos WordPress

Mariajose
 Mariajose
Usuario eminente

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

ResponderCitar
Respondido : 06/05/2022 9:00 am
Pepe
 Pepe
Soporte CMS Webempresa 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

 

ResponderCitar
Respondido : 06/05/2022 9:22 am

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

Mariajose
 Mariajose
Usuario eminente

@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?

ResponderCitar
Respondido : 15/07/2022 2:54 pm
Pepe
 Pepe
Soporte CMS Webempresa 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

 

ResponderCitar
Respondido : 15/07/2022 3:07 pm