[Jefferson Maldonado]

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.

CSS-video.txt 475 B Text File - Click to view

Opciones

• Copy Download Link

/* Contenedor de la sección con tamaño específico y overflow oculto */ .seccion-con-video { position: relative; height: 500px; /* Altura de la franja visible */ overflow: hidden; } /* Estilo del video para cubrir el área deseada, ajustar según necesidad */ .video-background { position: absolute; top: 50%; /* Centrar verticalmente */ left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; }

Expand