Centrar verticalmente Video como fondo de sección

  • Centrar verticalmente Video como fondo de sección

    Discusión creada por Juan Carlos Carballo el 19 de febrero de 2024 en 3:00 PM

    Hola a todos, necesito ayuda!!!

    Tengo una sección que como fondo tengo un video. el caso es que necesitaria poder ajustarlo verticalmente para que el campo de visualización sea una franja determinada ( por ejemplo 500 px en el centro del video )

    Alguien sabe como hacerlo ???

    Gracias por vuestra ayuda

    Jefferson Maldonado ha respondido hace 1 mes, 2 semanas 2 Miembros · 1 Respuesta
  • 1 Respuesta
  • Jefferson Maldonado

    organizador
    24 de febrero de 2024 en 10:06 AM

    Que tal Juan Carlos, un gusto Saludarte 😊🖐

    Para lograr un efecto en el que solo se muestre una franja específica de un video como fondo, especialmente si estás trabajando con el constructor Divi de WordPress, hay varias formas de hacerlo. Aquí describo un enfoque que puedes utilizar ajustando el CSS para enfocar específicamente la parte del video que deseas mostrar:

    Paso 1: Ajustar el Tamaño y Posición del Video

    Primero, necesitarás ajustar el tamaño del video para que ocupe más espacio del necesario y luego centrarlo para mostrar solo la parte que te interesa. Esto puede lograrse mediante CSS. La idea es hacer que el contenedor del video sea más grande que el área de visualización deseada y luego usar overflow: hidden; para ocultar las partes del video que no quieres mostrar.

    Paso 2: CSS para la Sección y el Video

    Aquí tienes un ejemplo de cómo podrías estructurar tu CSS:


    Paso 3: Aplicar los Estilos en Divi

    Para aplicar estos estilos en Divi:

    Personalizar CSS de la Sección/Row/Module: Ve a la configuración de la Sección, Fila o Módulo donde tienes el video. En el panel de configuración, busca la opción de CSS personalizado o Custom CSS y agrega las clases correspondientes a tus elementos.

    Clases CSS Adicionales: Puedes agregar las clases directamente a tus elementos en Divi en la sección de configuración avanzada de cada elemento, asegurándote de que coincidan con los nombres de clase que has definido en tu CSS.

    Agregar el CSS: Puedes agregar el CSS a tu sitio Divi yendo a Divi > Opciones del Tema > General > CSS Personalizado, o directamente en el editor de páginas en la sección de Ajustes de la Página > CSS Avanzado.

    Este enfoque te permitirá controlar exactamente qué parte del video se muestra, permitiéndote enfocar en una franja específica del mismo.

Inicia sesión para responder.

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →