How To Use

How To Use Video Background Block

Easily add stunning video backgrounds to any section of your website to create a modern and engaging visual experience. With a simple and user-friendly interface, you can quickly enable video backgrounds, choose video sources (self-hosted, YouTube, or Vimeo), and control playback settings for a perfect presentation. Customize height, padding, overlays, fallback images, and responsive settings to seamlessly match your website design and ensure smooth performance across all devices.

You can follow the steps below to use the Video Background Block.

Add to the Page:

Find and select the Video Background Block from the block library, then click it into your desired section on the page. 

Then you can see the default theme on the display. And you can see here the features and controls.

Video Sources:

Configure and manage background video sources for your block. Upload or add MP4, WebM, and OGG video URLs to ensure smooth playback across all modern devices and browsers. Use hosted videos, YouTube, or Vimeo sources with responsive support for desktop, tablet, and mobile screens.

Add Any Block Inside Video Background:

Easily add a video background to any Gutenberg block by clicking the “+” icon or using the block inserter. Upload or insert MP4, WebM, and OGG video URLs, or use YouTube and Vimeo sources to create stunning animated backgrounds for sections, banners, containers, hero areas, and more.

Configure responsive video settings for desktop, tablet, and mobile devices for a smooth viewing experience across all screen sizes. 

Poster Settings:

Add responsive poster images for your video background block to improve loading performance and provide a fallback before the video starts playing. Easily set different poster images for desktop, tablet, and mobile devices by uploading images or adding image URLs.

You can also enable poster overlay effects like blur, dominant color, and poster layer visibility to create a more polished and visually engaging background experience.

Playback Settings

Customize how your background video behaves and appears across your website with flexible playback and display controls.

• Video Fit: Choose how the video scales inside its container using options like Cover, Contain, or Fill for the perfect background appearance.
• Start & End Trim: Set custom start and end times using sliders or input fields to display only the desired portion of the video.
• Playback Speed: Control video playback speed to create smooth, cinematic, slow-motion, or fast-paced background effects.

Video Background Layout & Style Settings

 Layout & Style Settings

Customize the overall appearance and structure of your video background block with advanced layout and styling controls.

You can easily manage overlay colors, blend effects, animated textures, pattern layers, and cinematic visual enhancements while adjusting responsive height and spacing settings for desktop, tablet, and mobile devices to create visually engaging and perfectly balanced background sections.

Shortcode Usage:

Easily display your team section anywhere on your website using a shortcode. Simply copy and paste the shortcode into pages, posts, or widgets to embed your team showcase without rebuilding it. This gives you full flexibility to place your team section wherever you need.

Add New ShortCode:

First, you go to the dashboard menu. Click the Add New menu.

After inserting the block, you will be redirected to the block editor page. From there, you can fully customize your team section according to your needs. Once you are satisfied with the design, click the Save button and then copy the shortcode from the page to easily reuse it anywhere on your site.

After that, you go back to the dashboard menu.

Insert Shortcode & Preview:

Copy the shortcode and paste it into any page, post, or widget area to display your team section instantly. Use the live preview option to see how your team layout looks on the frontend before publishing, ensuring everything appears perfectly styled and responsive. 

After that, you can publish or save the setting and visit your website to see the current preview.

                                                     Short Code 

That’s it.