Etchenet Scroll Video Background Builder

Descripción

Vídeos de demostración

Páginas de demostración

https://etchenet.com/demo-scroll-video-agence-immobiliere-pays-basque/

https://etchenet.com/demo-sidra-scroll/

Etchenet Scroll Video Background Builder añade vídeos de fondo decorativos que siguen el progreso de desplazamiento de la página. Está diseñado para WordPress.org como un plugin ligero con JavaScript nativo, sin GSAP, jQuery, API remotas, seguimiento ni recursos de CDN obligatorios.

El plugin proporciona tres formas complementarias de usar fondos de vídeo controlados por desplazamiento:

• Secciones de Gutenberg: inserta el bloque Etchenet Scroll Video Background Section en cualquier página o entrada de Gutenberg y, después, añade bloques normales dentro.
• Páginas: activa un fondo fijo de página desde la barra lateral de ajustes de la página en el editor.
• Entradas: activa un fondo fijo de entrada desde la barra lateral de ajustes de la entrada en el editor.
• Plantillas: inserta el bloque Etchenet Scroll Video Template Layer en una plantilla de tema de bloques como Inicio, Índice, Archivo o Búsqueda.
• Partes de plantilla: inserta el bloque Template Layer en una parte de plantilla cuando quieras intencionadamente que esa parte de plantilla sea propietaria de la capa fija decorativa de fondo.
• Compatibilidad con Elementor: activa opcionalmente la compatibilidad con Elementor y, después, usa los ajustes del documento o los controles de sección/contenedor.

El script de la portada pausa el vídeo decorativo y asigna el progreso del desplazamiento a video.currentTime con requestAnimationFrame. Los vídeos están silenciados, son en línea, decorativos y están ocultos para las tecnologías de asistencia. Las preferencias de reducción de movimiento y las limitaciones de vídeo de los navegadores móviles se gestionan con estados alternativos.

Aviso de compatibilidad:

• Esta versión es compatible con WordPress 7.0.
• Las pruebas de compatibilidad con WordPress 7.0 forman parte del proceso de validación actual.

Características principales:

• Control por desplazamiento con JavaScript nativo.
• Bloque de sección/contenedor de Gutenberg con InnerBlocks.
• Controles de la biblioteca de medios para vídeo, vídeo móvil, imagen de póster e imagen alternativa móvil.
• Campos de URL manual alternativa para vídeos no almacenados en la biblioteca de medios.
• Ajustes separados de fondo de página/entrada almacenados como metadatos de la entrada.
• Bloque dedicado de capa de plantilla para plantillas y partes de plantilla de edición completa del sitio.
• Controles de documento de Elementor para fondos de página y plantilla.
• Controles de sección/contenedor de Elementor para áreas independientes de fondo de vídeo.
• Rangos de desplazamiento de reproducción adaptables para diseños de escritorio, tableta y móvil.
• CSS encapsulado usando el prefijo svbs-.
• Carga condicional de recursos para la salida del bloque y del fondo de página/entrada.

Usa el bloque llamado «Etchenet Scroll Video Background Section», el panel Page/Post Background, el bloque Template Layer o los controles de integración con Elementor.

Uso

Compatibilidad con Elementor

Elementor es opcional, no obligatorio. Etchenet Scroll Video Background Builder debe seguir funcionando sin Elementor instalado. No declares Elementor como dependencia obligatoria salvo que tu sitio dependa realmente de diseños específicos de Elementor.

El plugin puede usarse dentro de páginas de Elementor. Si Elementor está activo, verifica que la salida del fondo de vídeo con desplazamiento funcione correctamente dentro de la sección o contenedor de Elementor de destino.

Páginas y plantillas de Elementor

Usa los ajustes del documento de Elementor cuando toda la página o plantilla de Elementor deba tener un fondo fijo de vídeo decorativo.

1. Ve a Etchenet Scroll Video Background Builder en la administración de WordPress.
2. Activa la integración con Elementor y guarda los ajustes.
3. Edita la página o plantilla con Elementor.
4. Abre los ajustes de la página/plantilla.
5. Busca la sección «Etchenet Scroll Video Background».
6. Activa el fondo y selecciona un vídeo de la biblioteca de medios o introduce una URL de vídeo manual.
7. Ajusta la opacidad de superposición, el rango de desplazamiento, el tiempo inicial, el tiempo final, el comportamiento móvil y el z-index.
8. Guarda la página o plantilla.

Secciones y contenedores de Elementor

Usa los controles de sección o contenedor de Elementor cuando el vídeo deba limitarse a un área de diseño específica.

1. Ve a Etchenet Scroll Video Background Builder en la administración de WordPress.
2. Activa la integración con Elementor y guarda los ajustes.
3. Edita una página o plantilla con Elementor.
4. Selecciona la sección o contenedor de destino.
5. Abre Estilo > Fondo.
6. Activa los controles de Etchenet Scroll Video.
7. Selecciona el vídeo, el vídeo móvil opcional, el póster opcional, la imagen alternativa móvil opcional, la superposición y los ajustes de control por desplazamiento.
8. Guarda la página o plantilla.

Secciones

Usa el bloque Gutenberg Section cuando el vídeo deba ser el fondo de un área de contenido específica.

1. Edita una página o entrada en Gutenberg.
2. Inserta el bloque «Etchenet Scroll Video Background Section».
3. Selecciona un vídeo de la biblioteca de medios o pega una URL de vídeo manual.
4. Añade bloques de Encabezado, Párrafo, Botones, Columnas, Grupo, Imagen u otros bloques de Gutenberg dentro de la sección.
5. Usa el control de alineación del bloque para diseños de ancho amplio o ancho completo.
6. Ajusta la anchura máxima del contenido, la altura mínima, la opacidad de superposición, los márgenes, los rellenos y los ajustes de control por desplazamiento.
7. Guarda la página o entrada.

Páginas

Usa el panel Page Background cuando toda la página individual deba tener un fondo fijo de vídeo decorativo.

1. Edita una página en Gutenberg.
2. Abre la barra lateral de ajustes de la página.
3. Busca el panel «Etchenet Scroll Video Page Background».
4. Activa el fondo para esa página.
5. Selecciona un vídeo o introduce una URL manual.
6. Ajusta la opacidad de superposición, el rango de desplazamiento, el tiempo inicial, el tiempo final, el comportamiento móvil y el z-index.
7. Guarda la página.

Entradas

Las entradas usan el mismo panel lateral del documento que las páginas.

1. Edita una entrada en Gutenberg.
2. Abre la barra lateral de ajustes de la entrada.
3. Activa el panel Etchenet Scroll Video Page Background.
4. Selecciona o introduce una URL de vídeo.
5. Guarda la entrada.

Plantillas

Usa el bloque Template Layer para plantillas de temas de bloques como Inicio, Índice, Archivo, Búsqueda, Individual o Página.

1. Abre Apariencia > Editor.
2. Abre la plantilla de destino.
3. Inserta el bloque «Etchenet Scroll Video Template Layer» cerca de la parte superior de la estructura de la plantilla.
4. Selecciona un vídeo o introduce una URL manual.
5. Ajusta la opacidad de superposición, el rango de desplazamiento, el tiempo inicial, el tiempo final y el z-index.
6. Guarda la plantilla.

El bloque Template Layer no tiene contenido interior. Muestra una capa fija de vídeo decorativo detrás del contenido de la plantilla. Si el bloque se elimina de la plantilla, también se elimina el fondo de plantilla.

Una plantilla puede proporcionar un fondo de vídeo por defecto, pero una página o entrada individual puede reemplazarlo con su propio fondo de página SVBB. La prioridad efectiva es primero los ajustes de página, después los ajustes de plantilla y, por último, los valores por defecto del plugin. Si un fondo de página está activo, el fondo de plantilla se ignora para que nunca se muestren dos fondos fijos SVBB al mismo tiempo.

Partes de plantilla

Las partes de plantilla son piezas reutilizables de un tema de bloques, como cabeceras, pies de página o áreas personalizadas. El bloque Template Layer puede insertarse en una parte de plantilla cuando quieras intencionadamente que esa parte de plantilla proporcione la capa de fondo para cada plantilla que la use.

Úsalo con cuidado: colocar el bloque Template Layer en una parte de plantilla compartida puede afectar a varias plantillas. Para la mayoría de sitios, insertar el bloque directamente en la plantilla específica es más fácil de entender y mantener.

Ajustes

Ajustes del bloque de sección

• Vídeo: vídeo principal de escritorio seleccionado desde la biblioteca de medios.
• Vídeo móvil: vídeo separado opcional para pantallas pequeñas.
• Imagen de póster: imagen mostrada antes de que se carguen los metadatos.
• Imagen alternativa móvil: imagen usada cuando la búsqueda de vídeo en móvil está limitada.
• URL de vídeo manual: alternativa para archivos MP4 alojados externamente o introducidos manualmente.
• Anchura máxima del contenido: limita el contenido interior de Gutenberg mientras la sección exterior puede permanecer en ancho completo.
• Alineación vertical: alineación superior, centrada o inferior para el contenido interior.
• Alineación horizontal: alineación izquierda, centrada o derecha para el contenido interior.
• Altura mínima: altura de sección como 100vh, 70vh o 640px.
• Color y opacidad de superposición: mejora la legibilidad del texto sobre el vídeo.
• Margen y relleno: controlan el espaciado sin aplicar CSS global.
• Inicio y fin del control por desplazamiento: controlan el rango de tiempo del vídeo usado por el progreso del desplazamiento.
• Suavizado: controla con qué rapidez el tiempo del vídeo sigue los cambios de desplazamiento.

Ajustes de fondo de página y entrada

• Activar el fondo de vídeo con desplazamiento para esta página: activa el fondo fijo solo para la página o entrada actual.
• Seleccionar vídeo de la biblioteca de medios: almacena el ID del medio y la URL.
• URL de vídeo manual alternativa: mantiene el fondo funcionando incluso sin un ID de medio.
• Opacidad de superposición: controla la superposición oscura sobre el vídeo.
• Rangos de desplazamiento de reproducción adaptables: distancias de desplazamiento de escritorio, tableta y móvil usadas para asignar el desplazamiento de la página al tiempo del vídeo.
• Tiempo inicial: primera marca de tiempo del vídeo usada para el control por desplazamiento.
• Tiempo final: marca de tiempo final del vídeo; usa 0 para usar la duración detectada del vídeo.
• Comportamiento móvil: activado, desactivado o póster alternativo.
• Ayuda de z-index: ajusta la capa de apilamiento del fondo si un tema lo requiere.
• Información de depuración: muestra la URL de vídeo resuelta usada por la portada.

Ajustes de capa de plantilla

• Seleccionar vídeo: elige el vídeo de fondo fijo de la plantilla.
• URL de vídeo manual: URL alternativa para vídeos fuera de la biblioteca de medios.
• Imagen de póster: póster opcional antes de que se carguen los metadatos.
• Color y opacidad de superposición: controlan el contraste.
• Rangos de desplazamiento de reproducción adaptables: los valores de escritorio, tableta y móvil asignan la distancia de desplazamiento al progreso del vídeo.
• Color y opacidad de superposición: controlan la capa de color opcional sobre el vídeo.
• Tiempo inicial y tiempo final: controlan el rango de vídeo usado para el control por desplazamiento.
• Z-index: ajusta la capa de fondo fija sin apuntar a cabeceras, pies de página ni contenedores de diseño global del tema.

Ajustes de administración

La página principal de administración proporciona ajustes del plugin, ajustes por defecto del control por desplazamiento, notas de comportamiento móvil, orientación para la optimización de vídeo, diagnóstico e información de donación/soporte. La integración con Elementor está desactivada por defecto y debe activarse allí antes de que se registren los controles de Elementor.

Ajustes de Elementor

• Activar integración con Elementor: desactivada por defecto en los ajustes de administración del plugin.
• Fondo de página/plantilla: se almacena en los ajustes del documento de Elementor para esa página o plantilla.
• Fondo de sección/contenedor: se almacena en los ajustes del elemento de Elementor para la sección o contenedor seleccionado.
• Vídeo y URL de vídeo manual: la URL manual se usa cuando se proporciona; en caso contrario, se usa la URL del vídeo de la biblioteca de medios.
• Tiempo inicial y tiempo final: controlan el rango de vídeo usado para el control por desplazamiento.
• Rango de desplazamiento: disponible para fondos fijos de página/plantilla.
• Rangos de desplazamiento adaptables: los valores de escritorio, tableta y móvil pueden configurarse de forma independiente.
• Suavizado: disponible para fondos de página/plantilla y fondos independientes de sección/contenedor.
• Vídeo móvil, póster e imagen alternativa móvil: disponibles para fondos de sección/contenedor.

Código fuente y proceso de construcción

El código fuente legible usado para generar los recursos compilados en /build se incluye en este paquete del plugin.

Los archivos fuente están en el directorio /src:

• src/index.js, src/edit.js y src/save.js generan build/index.js.
• src/view.js genera build/view.js.
• src/page-settings.js genera build/page-settings.js.
• src/page-background.js genera build/page-background.js.
• src/template-layer/index.js y src/template-layer/view.js generan los archivos JavaScript en build/template-layer/.
• src/*.scss y src/template-layer/*.scss generan los archivos CSS compilados en /build.
• La integración con Elementor está implementada en includes/class-elementor-integration.php y reutiliza los recursos compilados de la portada.

El proceso de construcción usa las herramientas estándar de WordPress Scripts documentadas en package.json y webpack.config.js.

Para regenerar los archivos compilados:

npm install

npm run build

No se carga ninguna biblioteca de ejecución de terceros desde una CDN. El plugin no incluye GSAP, jQuery, scripts de seguimiento ni integraciones con API remotas.

Directrices de vídeo

Para un control por desplazamiento fiable, usa vídeos MP4 cortos codificados con H.264. Mantén dimensiones y tamaño de archivo razonables, usa metadatos faststart y considera versiones separadas para escritorio y móvil.

La duración recomendada suele ser de 5 a 15 segundos. Las tasas de fotogramas recomendadas son 24, 30 o 60 fps según la fluidez necesaria. Evita archivos 4K pesados para móvil y usa una imagen de póster junto con una imagen alternativa para móvil.

Comando base recomendado:

ffmpeg -i input.mov -movflags faststart -vcodec libx264 -crf 23 -pix_fmt yuv420p output.mp4

Para un control por desplazamiento más preciso con fotogramas clave frecuentes:

ffmpeg -i input.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output-keyframes.mp4

Los vídeos grandes, los vídeos largos, la falta de metadatos, un alojamiento distante o fotogramas clave poco frecuentes pueden hacer que el control por desplazamiento parezca lento o irregular.

Privacidad

Este plugin no recopila datos personales, no establece cookies de seguimiento ni envía datos de visitantes a servicios externos.

Los vídeos y las imágenes se cargan desde las URL configuradas por los administradores o editores del sitio. Si usas URL de medios de terceros, esos servicios de terceros pueden recibir solicitudes estándar del navegador de los visitantes.

Licencia

Etchenet Scroll Video Background Builder tiene licencia GPLv2 o posterior.

URI de la licencia: https://www.gnu.org/licenses/gpl-2.0.html

Soporte

Web del plugin: https://etchenet.com/etchenet-scroll-video-background-builder/

Web del autor: https://etchenet.com/

Contacto: info@etchenet.com