Etchenet Scroll Video Background Builder
| 开发者 | etchenet |
|---|---|
| 更新时间 | 2026年5月28日 22:29 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.0 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Demo videos
https://www.youtube.com/watch?v=bogWHlBoGI8
https://www.youtube.com/watch?v=uBE1UCDH7Nw
Demo pages
https://etchenet.com/demo-scroll-video-agence-immobiliere-pays-basque/
https://etchenet.com/demo-sidra-scroll/
Etchenet Scroll Video Background Builder adds decorative background videos that follow page scroll progress. It is designed for WordPress.org as a lightweight native JavaScript plugin without GSAP, jQuery, remote APIs, tracking, or required CDN assets.
The plugin provides three complementary ways to use scroll-scrubbed video backgrounds:
- Gutenberg sections: insert the Etchenet Scroll Video Background Section block in any Gutenberg page or post, then add normal blocks inside it.
- Pages: enable a fixed page background from the Page settings sidebar in the editor.
- Posts: enable a fixed post background from the Post settings sidebar in the editor.
- Templates: insert the Etchenet Scroll Video Template Layer block in a block theme template such as Home, Index, Archive, or Search.
- Template parts: insert the Template Layer block in a template part when you intentionally want that template part to own the decorative fixed background layer.
- Elementor compatibility: optionally enable Elementor support, then use document settings or section/container controls.
video.currentTime with requestAnimationFrame. Videos are muted, inline, decorative, and hidden from assistive technology. Reduced-motion preferences and mobile browser video limitations are handled with fallback states.
Compatibility notice:
- This release is compatible with WordPress 7.0.
- WordPress 7.0 compatibility testing is part of the current validation process.
- Native JavaScript scroll scrubbing.
- Gutenberg section/container block with InnerBlocks.
- Media Library controls for video, mobile video, poster image, and mobile fallback image.
- Manual URL fallback fields for videos not stored in the Media Library.
- Separate page/post background settings stored as post meta.
- Dedicated template layer block for Full Site Editing templates and template parts.
- Elementor document controls for page and template backgrounds.
- Elementor section/container controls for independent video background areas.
- Responsive playback scroll ranges for desktop, tablet, and mobile layouts.
- Encapsulated CSS using the
svbs-prefix. - Conditional asset loading for block and page/post background output.
安装:
- Upload the
etchenet-scroll-video-background-builderfolder to the/wp-content/plugins/directory, or install the ZIP through Plugins > Add New > Upload Plugin. - Activate the plugin through the Plugins screen in WordPress.
- Open the Etchenet Scroll Video Background Builder top-level admin menu to configure the plugin.
- Add the Etchenet Scroll Video Background Section block to a page or post, enable a page/post background in the document settings sidebar, configure an Elementor page/template/section background, or insert the Template Layer block in a block theme template.
屏幕截图:
常见问题:
Does this plugin use GSAP or ScrollTrigger?
No. The WordPress.org version uses native JavaScript only.
Does it load scripts on every page?
Frontend assets are loaded when the block or page/post background output is present.
Can I use it with posts?
Yes. The page/post sidebar panel is available for posts and pages.
Can I use it with block theme templates?
Yes. Insert the Etchenet Scroll Video Template Layer block into the desired block theme template or template part.
Can I use it with Elementor templates?
Yes. Edit the Elementor template, open the template document settings, and enable the Etchenet Scroll Video Background controls. You can also enable a background on individual Elementor sections or containers inside a template.
Why does mobile behave differently?
Mobile browsers may limit video preloading, seeking, or playback until the visitor interacts with the page. The plugin includes fallback classes, mobile behavior settings, poster support, and a muted inline priming attempt after the first user interaction.
Is the video accessible?
The video is decorative and marked with aria-hidden="true". Keep meaningful content in normal Gutenberg blocks so the page remains useful without video.
Can I use remote video URLs?
Yes, but performance is usually better when the video is optimized and served reliably. The plugin itself does not require any CDN.
更新日志:
1.8
- Removed the legacy "Playback scroll range" field from WordPress admin sidebars, Gutenberg template controls, and Elementor document controls.
- Kept legacy saved values as desktop fallbacks when responsive desktop values are missing.
- Frontend output now sends only
data-range-desktop,data-range-tablet, anddata-range-mobilefor playback range selection.
- Renamed public PHP namespace, constants, option names, settings group, and Elementor setting keys to use the unique
etchenet_svbb/ETCHENET_SVBBplugin prefix required by WordPress.org.
- Added responsive playback scroll range settings for desktop, tablet, and mobile.
- Added responsive scroll range support for Gutenberg page backgrounds, template layers, and section blocks.
- Added responsive scroll range support for Elementor document backgrounds and section/container backgrounds.
- Kept legacy playback scroll range values as desktop fallbacks for existing content.
- Declared compatibility with WordPress 7.0.
- Added Elementor editor live preview updates for document video backgrounds.
- Updated section/container preview behavior so changed Elementor video and overlay settings refresh in the preview without saving first.
- Restored Elementor overlay controls and output with working CSS variables.
- Kept Elementor video replacement fixes from 1.1.2.
- Removed Elementor overlay controls and Elementor overlay output.
- Made Media Library video selection take priority over stale manual URL values.
- Added attachment ID fallback when Elementor stores a media ID without a URL.
- Added smoothing support to Elementor page/template backgrounds.
- Added an admin setting for Elementor integration.
- Kept Elementor integration disabled by default until explicitly enabled.
- Added Elementor document controls for page and template fixed video backgrounds.
- Added Elementor section and container controls for independent scroll-scrubbed video background areas.
- Reused the existing native JavaScript frontend engine without GSAP, jQuery, remote APIs, or CDN dependencies.
- Updated frontend CSS and JavaScript so Elementor layouts receive scoped background layers without applying Gutenberg section layout styles.
- Added the Etchenet Scroll Video Template Layer block for block theme templates and template parts.
- Added a dynamic render callback for fixed template background video output.
- Added separate frontend assets for template background scroll scrubbing.
- Documented source files and the build process for WordPress.org review.
- Removed the unstable global/template background option.
- Restored page and post background rendering so saved page settings render independently.
- Kept Site Editor templates isolated from page/post metadata.
- Added admin-based global/template background settings for blog, archive, search, and optional site-wide background output.
- Kept Site Editor templates free of page meta writes to avoid template save errors.
- Initial release.
- Added dedicated Cover-style Gutenberg section block with InnerBlocks.
- Added Media Library controls for video, mobile video, poster image, and mobile fallback image.
- Added separate page-level scroll video background settings in the Gutenberg document sidebar.
- Added native JavaScript scroll scrubbing.
- Added top-level admin documentation page.
- Added mobile fallback and reduced-motion handling.
- Added video optimization documentation.