He intentado poner un video en formato mp4, y al ponerle reproducción en bloque, el vídeo no se reproduce automáticamente. he estado mirando y lo he intentado hacer por liquide, pero ninguno de los que he encontrado ajusta el tamaño del vídeo, haciendo que se vea en todo el ancho de la pantalla, cuando lo que quiero es que ocupe un cuadrado pequeño.
Hola,
¿Cuál es exactamente la dirección de tu tienda y específicamente del video?
Es para tratar de ayudarte.
Un saludo.
Hola, Te adjunto el enlace exacto donde se encuentran los videos.
https://myswiftdrop.com/products/extensor-grifo
Una vez entres, bajas hacia abajo y verás todos los videos. Son todos ellos los que están en un formato enorme.
Hola, @Myswiftdrop :
Gracias por escribirnos. Entiendo que estás intentando añadir un vídeo en bucle en tu tienda. Con todo, te gustaría también poder adaptar el tamaño del mismo, ¿cierto? Será un placer ayudar.
A modo de contexto, la herramienta de vídeo de Shopify puede variar en función del tema que estés usando. En este caso, ¿podrías confirmarme el tema que utilizas en tu tienda? Puedes revisar esta cuestión a través de la sección Tienda online > Temas > Personalizar. En esta página, haz clic en los Tres puntos que aparecen en la esquina superior izquierda. Podrás acceder al nombre y desarrollador del tema.
Si se trata de un tema gratuito de Shopify, es importante tener en cuenta que la sección nativa de vídeo del editor de temas no permite ajustar el tamaño. Aparte, si bien es posible activar la opción de Reproducir el vídeo en bucle, es necesario hacer un primer clic para iniciar la reproducción. Como te comento, este es el comportamiento esperado de la sección nativa de vídeo disponible en los temas de Shopify.
En este caso, si deseas configurar una sección algo más personalizable; será necesario desarrollar un código Liquid para esta sección. Dicho esto, me alegra informarte de que los temas de Shopify permiten agregar una sección de Liquid personalizado en las tiendas. A continuación, te dejo un código que puede adaptarse a tus necesidades actuales y cómo añadirlo en tu propio tema de Shopify:
**> **> **> *
Para agregar esta sección en tu tienda, dirígete al apartado Tienda online > Temas > Personalizar. Accede a la página donde deseas añadir el vídeo con reproducción automática y tamaño personalizado. En el menú de la izquierda, localiza Agregar sección > Liquid personalizado y pega el código.
Como habrás podido comprobar, en el código se incluye una línea que dice AÑADE LA DIRECCIÓN DE TU VÍDEO AQUÍ. Para generar la dirección del vídeo, puedes subirlo a través de la sección Contenido > Archivos en el panel de control. Esto generará un enlace interno con la dirección específica de dicho archivo. Simplemente, copia este enlace y pégalo dentro del código. Para ajustar el tamaño, puedes cambiar la cantidad de píxeles de la línea que dice height: 450px;. Si vas a seguir este procedimiento en algunas páginas de productos, puedes valorar utilizar la herramienta de plantillas.
Dime, ¿podrías confirmarme si este código personalizado funciona para los objetivos que deseas conseguir con tu tienda? Mientras revisas esta información, ¿cómo va el resto de cuestiones con tu negocio?
Buenas tardes, muchas gracias por mostrar interés en ayudarme. Estoy utilizando el Tema gratuito Dawn.
El código que has escrito es el que yo ya tenía como Liquid personalizado y nada, no funciona. La verdad que me está dando mucho trabajo este tema ya que no lo consigo solucionar de ninguna de las maneras…
¿Alguna otra opción?
Hola.
Añade la sección llamada “Video” propia de la plantilla Dawn. Cuando añadas esta sección, simplemente en el CSS personalizado pon el siguiente código.
.video-section {
width: 600px;
height: auto;
}
@media screen and (max-width: 750px) {
.video-section {
width: auto;
height: auto;
}
}
Después de esto, se verá de la siguiente forma.
Comenta si te sirve.
Un saludo.
1 Like
Buenos días, el problema es que si añado la sección video como tu me dices, el video no se reproduce solo, necesitar darle al play para que empiece a reproducirse. De la forma que lo tengo yo, el video se reproduce solo y en bucle.
Este es el Liquid que tengo yo en cada video:
video { width: 100%; height: auto; display: block; margin: 0; }Pero con este Liquid personalizado no hay forma de que el video en la versión ordenador se haga más pequeño, ya que no cabe en la pantalla.
Hola, @Myswiftdrop :
Gracias por la respuesta y confirmación del tema que estás usando. Tras echar un vistazo al código Liquid personalizado que estás utilizando y que has compartido con @ColombiaDev ; he de informarte de que he tenido la oportunidad de probarlo en mi propia tienda. Con todo, he podido ajustar el tamaño de vídeo especificando un tamaño de altura concreto. He cambiado la línea height: auto; por height: 300px;.
Te dejo una captura de cómo aparece el vídeo con el código que nos mandas:
Te dejo otra captura de cómo aparece el video cambiando la línea de altura:
Al guardar la configuración con la línea de height con un tamaño específico, el vídeo se muestra ajustado en la página web de la tienda. Este es el tipo de código y personalización que te comentaba en mi respuesta anterior. Dime, ¿podrías confirmarme si has podido hacer el ajuste de altura en el código de Liquid personalizado del vídeo como te comento? ¿Este se ajusta en tamaño en la página de tu tienda?
Si esta personalización no funciona con tu tienda, he de informarte de que en Shopify contamos con un equipo especialista de temas que pueden valorar implementar personalizaciones por ti; siempre que cumplas con la política de diseño de Shopify. En este caso, debes escribirnos de manera autenticada a través del Centro de Ayuda, haciendo clic en Contacta con atención al cliente de Shopify para contactar con este equipo de especialistas. Así, nuestros expertos podrán valorar implementar este ajuste en tu tienda.
Alternativamente, también tienes la opción de contratar a un Partner de Shopify para este fin. Este es un grupo de expertos y desarrolladores que pueden darte presupuesto para cualquier tipo de modificación, ajuste o personalización de diseño que necesites implementar en tu tienda. Mientras revisas estas cuestiones, aparte de la sección del vídeo, ¿el resto de secciones de tu tienda tienen el diseño que deseas?
Buenos días, en mi tienda parece ser que no funciona y no entiendo el porque…
Hola, @Myswiftdrop :
Gracias por la respuesta. Por curiosidad, ¿es posible que hayas implementado algún cambio de código adicional al tema de tu tienda? Si no es así, ¿has instalado alguna app para editar el diseño? Te comento esto porque, en ocasiones, las apps o cambios de código pueden afectar al comportamiento esperado.
Dicho esto, para revisar esta cuestión con más detenimiento; ¿podrías confirmarme la versión del tema Dawn de tu tienda? De igual manera, te recomendaría instalar una nueva versión de Dawn. Hecho esto, el tema aparecerá en la sección Tienda online > Temas > Biblioteca de temas. Puedes seleccionar la opción de Personalizar para intentar añadir una sección de Liquid personalizado con el código que compartes.
Dime, ¿el código sigue sin funcionar en el nuevo tema? En este caso, ¿podrías compartir conmigo una captura de pantalla donde se vea el código dentro de la sección de Liquid personalizado como las que te comparto en el mensaje anterior? Esto me permitirá investigar esta cuestión con más detenimiento.
Con todo, como te comento en la anterior respuesta; siempre tienes la opción de contactar con nuestro equipo de soporte a través del Centro de Ayuda para que puedan valorar hacer una implementación personalizada en tu tienda. Alternativamente, puedes contratar los servicios de un desarrollador experto que forme parte de nuestra cartera de Partners de Shopify para esta finalidad.
Hola, te adjunto la captura de pantalla con el Liquid personalizado dentro del Tema Dawn con la versión actualizada 15.0.0.
Como puedes observar el video aparece a un tamaño descomunal aún modificando el Liquid.
Hola, @Myswiftdrop :
Gracias por la respuesta y captura. Investigando más a fondo esta cuestión, he encontrado una configuración que puede estar afectando a cómo se visualiza el vídeo integrado por Liquid personalizado.
Tras analizar con más detenimiento el código Liquid, me he percatado de que el estilo CSS está configurado como tal para todos los vídeos que has integrado como Liquid personalizado. El comportamiento esperado de esta configuración es que; cuando haya más de un vídeo como liquid personalizado, se tome como referencia el estilo del último código. Esto es, al tener 2 secciones de vídeo en tu página, el sistema tomará el estilo de la última sección de Liquid personalizado para aplicarlo a todos los vídeos de la página.
En este caso, si te diriges a la sección Tienda online > Temas > Personalizar en el panel de control de tu tienda, accedes a la página donde has configurado estos vídeos y modificas el campo de height: auto; por height: 300px; en la última sección de Liquid personalizado que aparece en el menú de la izquierda, ¿podrías confirmarme si el tamaño se modifica dentro de todos los vídeos que aparecen en la página?
Si es así, me alegra informarte de que podrás ajustar el tamaño de todos los vídeos de manera conjunta simplemente cambiando este campo del código en la última sección de Liquid personalizado. Si deseas establecer estilos y tamaños diferentes para los distintos vídeos de una misma página, tendrás que crear una referencia de clase en el vídeo y cambiar el nombre del estilo CSS. Te dejo un ejemplo de este código:
La modificación que he implementado en este código es que he añadido class=“video-1” a la etiqueta de
Dime, ¿podrías confirmarme si cambiando el código únicamente de la última sección de Liquid personalizado en tu página los cambios se aplican correctamente? En este caso, ¿buscas diseños de tamaño distintos para los diferentes vídeos en bucle que aparecen dentro de la página de tus productos?
HOLA TU RESPUESTA FU DE GRAN AYUDA PERO EL VIDEO NO QUIERE REPRODUCIR EL SONIDO ME PODRIAS DECIR QUE PUEDE PASAR