Video backgrounds place moving footage behind the content in a page section. Video Background Block Pro adds controls for building these sections in Gutenberg, without writing code. Use them for hero areas, banners, landing pages, promotional content, portfolios, agency and business sites, product presentations, or personal blogs. Universal shortcodes can also display video backgrounds with Gutenberg and other popular page builders.

Choose video sources for each device

Use self-hosted MP4, WebM, or OGG videos stored on your site, or choose a YouTube or Vimeo video for background playback. Set separate video sources for desktop, tablet, and mobile so each screen size can use different media.

Set posters for each device

Assign a poster picture for desktop, tablet, and mobile. Poster controls let you show or conceal the image, apply a blur effect, and choose an automatic or custom dominant color. A fallback image can appear when a video cannot be loaded.

Adjust the section's appearance and fit

Overlay options include colors, gradients, opacity, and blend modes. Add dot, grid, or diagonal patterns with adjustable opacity, animated overlay effects, a noise texture, or a cinematic vignette to shape how text and other content appear over the video.

Set responsive 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 display conditions

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

Use video backgrounds in page layouts

• Place a video behind introductory content in a hero section.
• Add movement to a landing page or promotional layout.
• Use a video background to present work on a portfolio or agency site.
• Create a focused section for product content or a campaign.

Add and configure a block

Install and activate Video Background Block Pro in WordPress. Open a page or post in the Gutenberg editor, add the Video Background block, and choose a video source. In the right sidebar, configure responsive media, poster pictures, overlays, dimensions, playback, and display conditions. Publish or update the page when the section is ready.