Parallax Fixed Video for WPBakery - Image 2

Parallax Fixed Video for WPBakery - Image 3

Parallax Fixed Video for WPBakery - Image 4

Parallax Fixed Video for WPBakery

0,00 € IVA

Turn any page into a stage with fixed video or image background, while rows and columns scroll on top. No CSS. Free and lightweight.

Online demo: https://marabelia.site/parallax/

Activate the effect only where you want by adding a class to the row and, to ensure readability, paint color panels on the columns (white by default or translucent black with an extra class).

Designed for WPBakery Page Builder, the plugin uses the standard structure .wpb_column > .vc_column-inner > .wpb_wrapper, so it works with the vast majority of themes that respect this markup.

Key features

Full-screen fixed video or image background.
Selective row-based activation (does not affect the whole site).
Per-column color panel without CSS (default white + black variant).
Controls for overlay, poster (mobile), and safe autoplay.
Performance: option to hide video on mobile and use poster.

Categories: Plugins Woocommerce, Plugins Wordpress

Description

Parallax Fixed Video for WPBakery

1. Installation and Setup

Install and activate the ZIP.

Go to Settings → Fixed Video Background:

Options on the Settings Page:

Video URL (MP4 on your server) — Required if you want video. Paste the full path to the .mp4 (preferably H.264, 720p, no audio). Tip: the lighter the file, the better the experience.
Poster / back-up image — Highly recommended. It displays while the video loads and when you hide it on mobile. Also use it if you prefer image only as the background.
Mode: Automatic if the page contains the row class — Recommended. The plugin only activates on pages that have a row with fvf-block.

Make only the row transparent — Enable it. Makes transparent only the row marked with fvf-block (not the entire template).
Cancel WPBakery parallax — Enable it to prevent micro-movements from WPBakery inner backgrounds. Ensures the video stays completely fixed while only the content scrolls.
Hide video on mobile (use poster) — Highly recommended for performance and due to autoplay policies on mobile devices. On mobile, users will see the static poster; on desktop, the video.
Default panel color (white) — Affects all columns with fvf-panel. This is the translucent background that ensures readability over the video. Adjust the opacity (the last number in rgba) to balance contrast and breathing room.
“Black” color (for fvf-panel-black) — Quick variant for high contrast. Applies when you assign fvf-panel fvf-panel-black to a column. Useful for strong titles/CTAs.
Inset (visual padding) — Inner spacing of the panel. Increase/decrease this value (e.g. 12px, 16px, 24px) to give breathing room to the panel content.
Radius — Rounded corners of the panel. Aesthetic and readable; if you want it fully square, set 0.
Shadow (box-shadow) — Depth of the panel. Useful to separate it from the video when the video has a lot of detail. Adjust final opacity so it doesn’t look like a “sticker”.

Page Flow Reminder

Window row: add fvf-block (opens the “window” to the fixed background).

Column with panel: add fvf-panel (applies the Default color).

Black variant: also add fvf-panel-black if you need more contrast.

2. Page Setup

A) Quick option: download and install the demo page

Download the file from our page demo:
→ PAGINA PARALLAX.txt
Create a new page in WordPress (Pages → Add New).
- If you use the Classic Editor: switch to the “Text/HTML” tab (not “Visual”).
- If you use Gutenberg: insert a “Custom HTML” block and work there.
Paste inside all the content from the .txt.
Save (Draft or Update).
Open WPBakery in Backend mode (button “Backend Editor”) to see the blocks already set up (rows, columns, texts, etc.).
- In the demo, the classes are already in place: the row with fvf-block and the columns with fvf-panel.
Customize: change texts, duplicate columns or sections, adjust titles and CTAs.
- The video and poster are defined by the plugin in Settings → Fixed Video Background, not within the page.

B) Manual option: configure rows and columns (WPBakery)

1. “Video window” row

Open a first row and in Row Settings look for Extra CSS Class and type the tag: fvf-block
This action will open the video window for the whole page, so that all new rows will become transparent by default and will display the video background.
For the plugin settings to activate, all rows on the page must include the extra CSS fvf-block. (It is recommended to duplicate rows)

2. Columns with color panel

Now, so that columns have a background color, open Column Settings and in Extra class name add: fvf-panel.
This paints the default translucent white panel (adjusted in the plugin settings):

Black variant (high contrast): also add fvf-panel-black
It would look like this: fvf-panel fvf-panel-black:

Content: place your blocks inside (Text Block, Heading, Button…) as usual and adjust the height of rows and columns.

In the page (WPBakery, Backend Editor):

- Row where you want the effect → Extra CSS Class: fvf-block.
- Column with panel → Extra CSS Class: fvf-panel.
- Black panel (optional) → also add fvf-panel-black.