Title: Etchenet Scroll Video Background Builder Author: etchenet Published: May 28, 2026 Last modified: May 28, 2026 --- Search plugins ![](https://ps.w.org/etchenet-scroll-video-background-builder/assets/banner-772x250. png?rev=3552306) ![](https://ps.w.org/etchenet-scroll-video-background-builder/assets/icon-256x256. png?rev=3552306) # Etchenet Scroll Video Background Builder By [etchenet](https://profiles.wordpress.org/etchenet/) [Download](https://downloads.wordpress.org/plugin/etchenet-scroll-video-background-builder.1.8.zip) * [Details](https://wordpress.org/plugins/etchenet-scroll-video-background-builder/#description) * [Reviews](https://wordpress.org/plugins/etchenet-scroll-video-background-builder/#reviews) * [Installation](https://wordpress.org/plugins/etchenet-scroll-video-background-builder/#installation) * [Development](https://wordpress.org/plugins/etchenet-scroll-video-background-builder/#developers) [Support](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/) ## Description Demo videos 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. The frontend script pauses the decorative video and maps scroll progress to `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. Main features: * 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. Use the block named “Etchenet Scroll Video Background Section”, the Page/Post Background panel, the Template Layer block, or the Elementor integration controls. ### Usage #### Elementor compatibility Elementor is optional, not required. Etchenet Scroll Video Background Builder must continue working without Elementor installed. Do not declare Elementor as a required dependency unless your site truly depends on Elementor-specific layouts. The plugin can be used inside Elementor pages. If Elementor is active, verify that the scroll video background output works correctly inside the target Elementor section or container. #### Elementor Pages and Templates Use the Elementor document settings when the whole Elementor page or Elementor template should have a fixed decorative video background. 1. Go to Etchenet Scroll Video Background Builder in WordPress admin. 2. Enable the Elementor integration and save settings. 3. Edit the page or template with Elementor. 4. Open the page/template settings. 5. Find the “Etchenet Scroll Video Background” section. 6. Enable the background and select a video from the Media Library or enter a manual video URL. 7. Adjust overlay opacity, scroll range, start time, end time, mobile behavior, and z-index. 8. Save the page or template. #### Elementor Sections and Containers Use Elementor section or container controls when the video should be limited to a specific layout area. 1. Go to Etchenet Scroll Video Background Builder in WordPress admin. 2. Enable the Elementor integration and save settings. 3. Edit a page or template with Elementor. 4. Select the target section or container. 5. Open Style > Background. 6. Enable the Etchenet Scroll Video controls. 7. Select the video, optional mobile video, optional poster, optional mobile fallback image, overlay, and scrub settings. 8. Save the page or template. #### Sections Use the Gutenberg Section block when the video should be the background of a specific content area. 1. Edit a page or post in Gutenberg. 2. Insert the “Etchenet Scroll Video Background Section” block. 3. Select a video from the Media Library or paste a manual video URL. 4. Add Heading, Paragraph, Buttons, Columns, Group, Image, or other Gutenberg blocks inside the section. 5. Use the block alignment control for Wide or Full width layouts. 6. Adjust content max width, minimum height, overlay opacity, margins, padding, and scrub settings. 7. Save the page or post. #### Pages Use the Page Background panel when the entire individual page should have a fixed decorative video background. 1. Edit a page in Gutenberg. 2. Open the Page settings sidebar. 3. Find the “Etchenet Scroll Video Page Background” panel. 4. Enable the background for that page. 5. Select a video or enter a manual URL. 6. Adjust overlay opacity, scroll range, start time, end time, mobile behavior, and z-index. 7. Save the page. #### Posts Posts use the same document sidebar panel as pages. 1. Edit a post in Gutenberg. 2. Open the Post settings sidebar. 3. Enable the Etchenet Scroll Video Page Background panel. 4. Select or enter a video URL. 5. Save the post. #### Templates Use the Template Layer block for block theme templates such as Home, Index, Archive, Search, Single, or Page templates. 1. Open Appearance > Editor. 2. Open the target template. 3. Insert the “Etchenet Scroll Video Template Layer” block near the top of the template structure. 4. Select a video or enter a manual URL. 5. Adjust overlay opacity, scroll range, start time, end time, and z-index. 6. Save the template. The Template Layer block has no inner content. It renders a fixed decorative video layer behind the template content. If the block is removed from the template, the template background is removed too. A template can provide a default video background, but an individual page or post can replace it with its own SVBB Page Background. The effective priority is page settings first, then template settings, then plugin defaults. If a page background is active, the template background is ignored so two fixed SVBB backgrounds are never rendered at the same time. #### Template Parts Template parts are reusable pieces of a block theme, such as headers, footers, or custom areas. The Template Layer block can be inserted in a template part when you intentionally want that template part to provide the background layer for every template that uses it. Use this carefully: placing the Template Layer block in a shared template part can affect multiple templates. For most sites, inserting the block directly in the specific template is easier to understand and maintain. ### Settings #### Section block settings * Video: main desktop video selected from the Media Library. * Mobile video: optional separate video for smaller screens. * Poster image: image shown before metadata loads. * Mobile fallback image: image used when mobile video seeking is limited. * Manual video URL: fallback for externally hosted or manually entered MP4 files. * Content max width: constrains the inner Gutenberg content while the outer section can remain full width. * Vertical alignment: top, center, or bottom alignment for the inner content. * Horizontal alignment: left, center, or right alignment for the inner content. * Minimum height: section height such as `100vh`, `70vh`, or `640px`. * Overlay color and opacity: improves text readability over video. * Margin and padding: controls spacing without applying global CSS. * Scrub start and end: controls the video time range used by scroll progress. * Smoothing: controls how quickly video time follows scroll changes. #### Page and post background settings * Enable scroll video background for this page: turns the fixed background on for the current page or post only. * Select video from Media Library: stores the media ID and URL. * Manual video URL fallback: keeps the background working even without a media ID. * Overlay opacity: controls the dark overlay above the video. * Responsive playback scroll ranges: desktop, tablet, and mobile scroll distances used to map page scroll to video time. * Start time: first video timestamp used for scrubbing. * End time: final video timestamp; use `0` to use the detected video duration. * Mobile behavior: enabled, disabled, or poster fallback. * Z-index helper: adjusts the background stacking layer if a theme requires it. * Debug information: shows the resolved video URL used by the frontend. #### Template layer settings * Select video: chooses the fixed template background video. * Manual video URL: fallback URL for videos outside the Media Library. * Poster image: optional poster before metadata loads. * Overlay color and opacity: controls contrast. * Responsive playback scroll ranges: desktop, tablet, and mobile values map scroll distance to video progress. * Overlay color and opacity: controls the optional color layer above the video. * Start time and end time: controls the video range used for scrubbing. * Z-index: adjusts the fixed background layer without targeting theme headers, footers, or global layout containers. #### Admin settings The top-level admin page provides plugin settings, default scrub settings, mobile behavior notes, video optimization guidance, troubleshooting, and donation/support information. Elementor integration is disabled by default and must be enabled there before Elementor controls are registered. #### Elementor settings * Enable Elementor integration: disabled by default in the plugin admin settings. * Page/template background: stored in Elementor document settings for that page or template. * Section/container background: stored in Elementor element settings for the selected section or container. * Video and manual video URL: the manual URL is used when provided; otherwise the Media Library video URL is used. * Start time and end time: controls the video range used for scrubbing. * Scroll range: available for fixed page/template backgrounds. * Responsive scroll ranges: desktop, tablet, and mobile values can be configured independently. * Smoothing: available for page/template and independent section/container backgrounds. * Mobile video, poster, and mobile fallback image: available for section/container backgrounds. ### Source Code and Build Process The human-readable source code used to generate the compiled assets in `/build` is included in this plugin package. Source files are in the `/src` directory: * `src/index.js`, `src/edit.js`, and `src/save.js` generate `build/index.js`. * `src/view.js` generates `build/view.js`. * `src/page-settings.js` generates `build/page-settings.js`. * `src/page-background.js` generates `build/page-background.js`. * `src/template-layer/index.js` and `src/template-layer/view.js` generate the JavaScript files in `build/template-layer/`. * `src/*.scss` and `src/template-layer/*.scss` generate the compiled CSS files in `/build`. * Elementor integration is implemented in `includes/class-elementor-integration. php` and reuses the compiled frontend assets. The build process uses the standard WordPress Scripts tooling documented in `package. json` and `webpack.config.js`. To regenerate the compiled files: ``` npm install npm run build ``` No third-party runtime library is loaded from a CDN. The plugin does not bundle GSAP, jQuery, tracking scripts, or remote API integrations. ### Video Guidelines For reliable scroll scrubbing, use short MP4 videos encoded with H.264. Keep dimensions and file size reasonable, use faststart metadata, and consider separate desktop and mobile versions. Recommended duration is usually 5 to 15 seconds. Recommended frame rates are 24, 30, or 60 fps depending on the smoothness needed. Avoid heavy 4K files for mobile, and use a poster image plus a mobile fallback image. Recommended baseline command: ``` ffmpeg -i input.mov -movflags faststart -vcodec libx264 -crf 23 -pix_fmt yuv420p output.mp4 ``` For more precise scrubbing with frequent keyframes: ``` ffmpeg -i input.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output-keyframes.mp4 ``` Large videos, long videos, missing metadata, distant hosting, or sparse keyframes can make scrubbing feel delayed or uneven. ### Privacy This plugin does not collect personal data, set tracking cookies, or send visitor data to external services. Videos and images are loaded from the URLs configured by site administrators or editors. If you use third-party media URLs, those third-party services may receive standard browser requests from visitors. ### License Etchenet Scroll Video Background Builder is licensed under GPLv2 or later. License URI: https://www.gnu.org/licenses/gpl-2.0.html ### Support Plugin website: https://etchenet.com/etchenet-scroll-video-background-builder/ Author website: https://etchenet.com/ Contact: info@etchenet.com ## Screenshots * [[ * Frontend demo page with a scroll-scrubbed video background and readable foreground content. * [[ * Plugin settings screen with output, Elementor, loading, and default scrub controls. * [[ * Gutenberg editor showing the Scroll Video Background block and page background settings. * [[ * Site Editor view showing the Template Layer block inside a block theme template. ## Blocks This plugin provides 2 blocks. * Etchenet Scroll Video Template Layer A fixed scroll-scrubbed video background layer for block theme templates. * Etchenet Scroll Video Background Section A Cover-like scroll-scrubbed video background section built with native JavaScript. ## Installation 1. Upload the `etchenet-scroll-video-background-builder` folder to the `/wp-content/ plugins/` directory, or install the ZIP through Plugins > Add New > Upload Plugin. 2. Activate the plugin through the Plugins screen in WordPress. 3. Open the Etchenet Scroll Video Background Builder top-level admin menu to configure the plugin. 4. 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. ## FAQ ### 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. ## Reviews ![](https://secure.gravatar.com/avatar/4db6478669eaa3a718d2c8c95a333d4a99a737d2a4cef385e3617d2df0574305? s=60&d=retro&r=g) ### 󠀁[Very pleasant](https://wordpress.org/support/topic/very-pleasant/)󠁿 [Laurent](https://profiles.wordpress.org/laubro/) May 31, 2026 This tool is really cool, the output is fantastic. [ Read all 1 review ](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/reviews/) ## Contributors & Developers “Etchenet Scroll Video Background Builder” is open source software. The following people have contributed to this plugin. Contributors * [ etchenet ](https://profiles.wordpress.org/etchenet/) [Translate “Etchenet Scroll Video Background Builder” into your language.](https://translate.wordpress.org/projects/wp-plugins/etchenet-scroll-video-background-builder) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/etchenet-scroll-video-background-builder/), check out the [SVN repository](https://plugins.svn.wordpress.org/etchenet-scroll-video-background-builder/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/etchenet-scroll-video-background-builder/) by [RSS](https://plugins.trac.wordpress.org/log/etchenet-scroll-video-background-builder/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 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`, and` data-range-mobile` for playback range selection. #### 1.1.7 * Renamed public PHP namespace, constants, option names, settings group, and Elementor setting keys to use the unique `etchenet_svbb` / `ETCHENET_SVBB` plugin prefix required by WordPress.org. #### 1.1.6 * 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. #### 1.1.5 * Declared compatibility with WordPress 7.0. #### 1.1.4 * 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. #### 1.1.3 * Restored Elementor overlay controls and output with working CSS variables. * Kept Elementor video replacement fixes from 1.1.2. #### 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. #### 1.1.1 * Added an admin setting for Elementor integration. * Kept Elementor integration disabled by default until explicitly enabled. #### 1.1.0 * 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. #### 1.0.3 * 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. #### 1.0.2 * 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. #### 1.0.1 * 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. #### 1.0.0 * 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. ## Meta * Version **1.8** * Last updated **6 days ago** * Active installations **Fewer than 10** * WordPress version ** 6.5 or higher ** * Tested up to **7.0** * PHP version ** 7.4 or higher ** * Tags * [animation](https://wordpress.org/plugins/tags/animation/)[elementor](https://wordpress.org/plugins/tags/elementor/) [gutenberg](https://wordpress.org/plugins/tags/gutenberg/)[video background](https://wordpress.org/plugins/tags/video-background/) * [Advanced View](https://wordpress.org/plugins/etchenet-scroll-video-background-builder/advanced/) ## Ratings 5 out of 5 stars. * [ 1 5-star review ](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/reviews/) ## Contributors * [ etchenet ](https://profiles.wordpress.org/etchenet/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/etchenet-scroll-video-background-builder/) ## Donate Would you like to support the advancement of this plugin? [ Donate to this plugin ](https://www.paypal.com/paypalme/etchenet/0.01)