Build native JavaScript scroll-scrubbed video backgrounds for WordPress content, templates, and optional Elementor layouts.

etchenet

<p>Demo videos</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/bogWHlBoGI8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/uBE1UCDH7Nw?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<p>Demo pages</p>
<p>https://etchenet.com/demo-scroll-video-agence-immobiliere-pays-basque/</p>
<p>https://etchenet.com/demo-sidra-scroll/</p>
<p>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.</p>
<p>The plugin provides three complementary ways to use scroll-scrubbed video backgrounds:</p>
<ul>
<li>Gutenberg sections: insert the Etchenet Scroll Video Background Section block in any Gutenberg page or post, then add normal blocks inside it.</li>
<li>Pages: enable a fixed page background from the Page settings sidebar in the editor.</li>
<li>Posts: enable a fixed post background from the Post settings sidebar in the editor.</li>
<li>Templates: insert the Etchenet Scroll Video Template Layer block in a block theme template such as Home, Index, Archive, or Search.</li>
<li>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.</li>
<li>Elementor compatibility: optionally enable Elementor support, then use document settings or section/container controls.</li>
</ul>
<p>The frontend script pauses the decorative video and maps scroll progress to <code>video.currentTime</code> with <code>requestAnimationFrame</code>. Videos are muted, inline, decorative, and hidden from assistive technology. Reduced-motion preferences and mobile browser video limitations are handled with fallback states.</p>
<p>Compatibility notice:</p>
<ul>
<li>This release is compatible with WordPress 7.0.</li>
<li>WordPress 7.0 compatibility testing is part of the current validation process.</li>
</ul>
<p>Main features:</p>
<ul>
<li>Native JavaScript scroll scrubbing.</li>
<li>Gutenberg section/container block with InnerBlocks.</li>
<li>Media Library controls for video, mobile video, poster image, and mobile fallback image.</li>
<li>Manual URL fallback fields for videos not stored in the Media Library.</li>
<li>Separate page/post background settings stored as post meta.</li>
<li>Dedicated template layer block for Full Site Editing templates and template parts.</li>
<li>Elementor document controls for page and template backgrounds.</li>
<li>Elementor section/container controls for independent video background areas.</li>
<li>Responsive playback scroll ranges for desktop, tablet, and mobile layouts.</li>
<li>Encapsulated CSS using the <code>svbs-</code> prefix.</li>
<li>Conditional asset loading for block and page/post background output.</li>
</ul>
<p>Use the block named “Etchenet Scroll Video Background Section”, the Page/Post Background panel, the Template Layer block, or the Elementor integration controls.</p>
<h3>Usage</h3>
<h4>Elementor compatibility</h4>
<p>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.</p>
<p>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.</p>
<h4>Elementor Pages and Templates</h4>
<p>Use the Elementor document settings when the whole Elementor page or Elementor template should have a fixed decorative video background.</p>
<ol>
<li>Go to Etchenet Scroll Video Background Builder in WordPress admin.</li>
<li>Enable the Elementor integration and save settings.</li>
<li>Edit the page or template with Elementor.</li>
<li>Open the page/template settings.</li>
<li>Find the “Etchenet Scroll Video Background” section.</li>
<li>Enable the background and select a video from the Media Library or enter a manual video URL.</li>
<li>Adjust overlay opacity, scroll range, start time, end time, mobile behavior, and z-index.</li>
<li>Save the page or template.</li>
</ol>
<h4>Elementor Sections and Containers</h4>
<p>Use Elementor section or container controls when the video should be limited to a specific layout area.</p>
<ol>
<li>Go to Etchenet Scroll Video Background Builder in WordPress admin.</li>
<li>Enable the Elementor integration and save settings.</li>
<li>Edit a page or template with Elementor.</li>
<li>Select the target section or container.</li>
<li>Open Style > Background.</li>
<li>Enable the Etchenet Scroll Video controls.</li>
<li>Select the video, optional mobile video, optional poster, optional mobile fallback image, overlay, and scrub settings.</li>
<li>Save the page or template.</li>
</ol>
<h4>Sections</h4>
<p>Use the Gutenberg Section block when the video should be the background of a specific content area.</p>
<ol>
<li>Edit a page or post in Gutenberg.</li>
<li>Insert the “Etchenet Scroll Video Background Section” block.</li>
<li>Select a video from the Media Library or paste a manual video URL.</li>
<li>Add Heading, Paragraph, Buttons, Columns, Group, Image, or other Gutenberg blocks inside the section.</li>
<li>Use the block alignment control for Wide or Full width layouts.</li>
<li>Adjust content max width, minimum height, overlay opacity, margins, padding, and scrub settings.</li>
<li>Save the page or post.</li>
</ol>
<h4>Pages</h4>
<p>Use the Page Background panel when the entire individual page should have a fixed decorative video background.</p>
<ol>
<li>Edit a page in Gutenberg.</li>
<li>Open the Page settings sidebar.</li>
<li>Find the “Etchenet Scroll Video Page Background” panel.</li>
<li>Enable the background for that page.</li>
<li>Select a video or enter a manual URL.</li>
<li>Adjust overlay opacity, scroll range, start time, end time, mobile behavior, and z-index.</li>
<li>Save the page.</li>
</ol>
<h4>Posts</h4>
<p>Posts use the same document sidebar panel as pages.</p>
<ol>
<li>Edit a post in Gutenberg.</li>
<li>Open the Post settings sidebar.</li>
<li>Enable the Etchenet Scroll Video Page Background panel.</li>
<li>Select or enter a video URL.</li>
<li>Save the post.</li>
</ol>
<h4>Templates</h4>
<p>Use the Template Layer block for block theme templates such as Home, Index, Archive, Search, Single, or Page templates.</p>
<ol>
<li>Open Appearance > Editor.</li>
<li>Open the target template.</li>
<li>Insert the “Etchenet Scroll Video Template Layer” block near the top of the template structure.</li>
<li>Select a video or enter a manual URL.</li>
<li>Adjust overlay opacity, scroll range, start time, end time, and z-index.</li>
<li>Save the template.</li>
</ol>
<p>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.</p>
<p>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.</p>
<h4>Template Parts</h4>
<p>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.</p>
<p>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.</p>
<h3>Settings</h3>
<h4>Section block settings</h4>
<ul>
<li>Video: main desktop video selected from the Media Library.</li>
<li>Mobile video: optional separate video for smaller screens.</li>
<li>Poster image: image shown before metadata loads.</li>
<li>Mobile fallback image: image used when mobile video seeking is limited.</li>
<li>Manual video URL: fallback for externally hosted or manually entered MP4 files.</li>
<li>Content max width: constrains the inner Gutenberg content while the outer section can remain full width.</li>
<li>Vertical alignment: top, center, or bottom alignment for the inner content.</li>
<li>Horizontal alignment: left, center, or right alignment for the inner content.</li>
<li>Minimum height: section height such as <code>100vh</code>, <code>70vh</code>, or <code>640px</code>.</li>
<li>Overlay color and opacity: improves text readability over video.</li>
<li>Margin and padding: controls spacing without applying global CSS.</li>
<li>Scrub start and end: controls the video time range used by scroll progress.</li>
<li>Smoothing: controls how quickly video time follows scroll changes.</li>
</ul>
<h4>Page and post background settings</h4>
<ul>
<li>Enable scroll video background for this page: turns the fixed background on for the current page or post only.</li>
<li>Select video from Media Library: stores the media ID and URL.</li>
<li>Manual video URL fallback: keeps the background working even without a media ID.</li>
<li>Overlay opacity: controls the dark overlay above the video.</li>
<li>Responsive playback scroll ranges: desktop, tablet, and mobile scroll distances used to map page scroll to video time.</li>
<li>Start time: first video timestamp used for scrubbing.</li>
<li>End time: final video timestamp; use <code>0</code> to use the detected video duration.</li>
<li>Mobile behavior: enabled, disabled, or poster fallback.</li>
<li>Z-index helper: adjusts the background stacking layer if a theme requires it.</li>
<li>Debug information: shows the resolved video URL used by the frontend.</li>
</ul>
<h4>Template layer settings</h4>
<ul>
<li>Select video: chooses the fixed template background video.</li>
<li>Manual video URL: fallback URL for videos outside the Media Library.</li>
<li>Poster image: optional poster before metadata loads.</li>
<li>Overlay color and opacity: controls contrast.</li>
<li>Responsive playback scroll ranges: desktop, tablet, and mobile values map scroll distance to video progress.</li>
<li>Overlay color and opacity: controls the optional color layer above the video.</li>
<li>Start time and end time: controls the video range used for scrubbing.</li>
<li>Z-index: adjusts the fixed background layer without targeting theme headers, footers, or global layout containers.</li>
</ul>
<h4>Admin settings</h4>
<p>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.</p>
<h4>Elementor settings</h4>
<ul>
<li>Enable Elementor integration: disabled by default in the plugin admin settings.</li>
<li>Page/template background: stored in Elementor document settings for that page or template.</li>
<li>Section/container background: stored in Elementor element settings for the selected section or container.</li>
<li>Video and manual video URL: the manual URL is used when provided; otherwise the Media Library video URL is used.</li>
<li>Start time and end time: controls the video range used for scrubbing.</li>
<li>Scroll range: available for fixed page/template backgrounds.</li>
<li>Responsive scroll ranges: desktop, tablet, and mobile values can be configured independently.</li>
<li>Smoothing: available for page/template and independent section/container backgrounds.</li>
<li>Mobile video, poster, and mobile fallback image: available for section/container backgrounds.</li>
</ul>
<h3>Source Code and Build Process</h3>
<p>The human-readable source code used to generate the compiled assets in <code>/build</code> is included in this plugin package.</p>
<p>Source files are in the <code>/src</code> directory:</p>
<ul>
<li><code>src/index.js</code>, <code>src/edit.js</code>, and <code>src/save.js</code> generate <code>build/index.js</code>.</li>
<li><code>src/view.js</code> generates <code>build/view.js</code>.</li>
<li><code>src/page-settings.js</code> generates <code>build/page-settings.js</code>.</li>
<li><code>src/page-background.js</code> generates <code>build/page-background.js</code>.</li>
<li><code>src/template-layer/index.js</code> and <code>src/template-layer/view.js</code> generate the JavaScript files in <code>build/template-layer/</code>.</li>
<li><code>src/*.scss</code> and <code>src/template-layer/*.scss</code> generate the compiled CSS files in <code>/build</code>.</li>
<li>Elementor integration is implemented in <code>includes/class-elementor-integration.php</code> and reuses the compiled frontend assets.</li>
</ul>
<p>The build process uses the standard WordPress Scripts tooling documented in <code>package.json</code> and <code>webpack.config.js</code>.</p>
<p>To regenerate the compiled files:</p>
<pre><code>npm install

npm run build
</code></pre>
<p>No third-party runtime library is loaded from a CDN. The plugin does not bundle GSAP, jQuery, tracking scripts, or remote API integrations.</p>
<h3>Video Guidelines</h3>
<p>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.</p>
<p>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.</p>
<p>Recommended baseline command:</p>
<pre><code>ffmpeg -i input.mov -movflags faststart -vcodec libx264 -crf 23 -pix_fmt yuv420p output.mp4
</code></pre>
<p>For more precise scrubbing with frequent keyframes:</p>
<pre><code>ffmpeg -i input.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output-keyframes.mp4
</code></pre>
<p>Large videos, long videos, missing metadata, distant hosting, or sparse keyframes can make scrubbing feel delayed or uneven.</p>
<h3>Privacy</h3>
<p>This plugin does not collect personal data, set tracking cookies, or send visitor data to external services.</p>
<p>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.</p>
<h3>License</h3>
<p>Etchenet Scroll Video Background Builder is licensed under GPLv2 or later.</p>
<p>License URI: https://www.gnu.org/licenses/gpl-2.0.html</p>
<h3>Support</h3>
<p>Plugin website: https://etchenet.com/etchenet-scroll-video-background-builder/</p>
<p>Author website: https://etchenet.com/</p>
<p>Contact: info@etchenet.com</p>


Etchenet Scroll Video Background Builder


This tool is really cool, the output is fantastic.


Alternatives to Etchenet Scroll Video Background Builder

Top alternatives