Video Background Block Pro lets you add video backgrounds to sections in the Gutenberg editor. Use the block for hero areas, banners, landing pages, portfolios, promotional content, agency and business sites, product presentations, or personal blogs. Configure sections in the editor without writing code. Universal shortcodes also let you display video backgrounds with Gutenberg and other popular page builders.

Choose media for each device

Use self-hosted MP4, WebM, or OGG videos stored on your site, or pick YouTube and Vimeo videos for background playback. Assign different video sources to desktop, tablet, and mobile. You can also set a separate poster picture for each screen size.

Poster settings let you display or hide the image, apply a blur effect, and use an automatic or custom dominant color. A fallback image can appear when a video cannot load.

Adjust the section's appearance

Set overlay colors or gradients, opacity, and blend modes. Add dot, grid, or diagonal patterns with adjustable opacity, animated overlay effects, a noise texture, or a cinematic vignette.

Set minimum heights and padding for desktop, tablet, and mobile. Choose Cover, Contain, or Fill to control how the video fits the section.

Set playback and visibility

Segment Loop plays a selected part of a video using start and end times. Playback Speed Control adjusts video speed, and Audio Support lets you add background music. Display Conditions control where the video background appears on your website.

Set up a video background

1. Install and activate Video Background Block Pro in WordPress.
2. Open a page or post in the Gutenberg editor and add the Video Background block.
3. Choose a video source, then configure responsive media, posters, overlays, dimensions, playback, and display conditions in the right sidebar.
4. Publish or update the page when the section is ready.