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>
</video>
Â
Â
Os dejo enlace al post concreto para que podáis ver los videos, están al final.
Contenido solo visible a usuarios registrados
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:
Â
Un saludo
Â
@pepesoler Lo probé como dijiste y si funciona. Lo del gif es verdad, tienes razón... En ese caso el código cambia no?
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;
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
@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!
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
Â
Â
@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.
@pepesolerya esta jejeje convertà el archivo mp2 a gif y puse vuestro código. Gracias Mil!
Hola Maria Jose.
Veo que se adapta a la resolución del Mobil.
A que te refieres con adapatativa ?
Â
Un saludo
Â
@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?
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 "
Â
Un saludo
Â