How to Set Up the Hero Area (Video Background)

The Hero Area is the large section at the top of your homepage. In Inspiro Lite, you can add a video background using the Block Editor or Elementor. The easiest way to get started is by importing a Starter Site and editing the homepage. You can also create a new page from scratch with a custom page template from the theme.

1. Using the Block Editor (Cover Block)
2. Using Elementor (Video Background in a Section)
3. Using the Customizer (Old Method)
4. Add a Video Popup Icon (Block Editor)

---

Using the Block Editor (Cover Block)

You have two options with the Block Editor:

Edit the homepage from a Starter Site

If you imported a Block Editor Starter Site, open the homepage and edit the existing Cover Block. Replace the demo video with your own.

Create a new page from scratch

If you prefer to start fresh:

1. Go to Pages → Add New.

2. Under Page Attributes → Template, select Page Builder (Transparent Header, Without Title).

3. Add a Cover Block to the page.

4. In the block settings, click Upload or Media Library to set your background video (MP4).
In the Style tab, you can customize the colors, typography, and other settings of the cover block.

5. Add any headings, buttons, or additional blocks on top of the video. You can also set the width of the cover block in the block settings toolbar.

6. Publish the page and, if intended, set it as your homepage under Settings → Reading.

Note: The Cover Block supports self-hosted MP4 files only. If you want to use a YouTube or Vimeo video, use Elementor or the Customizer (old method) instead.

Tip: Another method to display an external video is by replacing the Cover Block with the Background Block included in the Advanced WordPress Backgrounds plugin.

Video Background Support on Mobile Devices

Inspiro Lite supports video backgrounds on mobile devices. The best options for video background mobile support are self-hosted videos and Vimeo videos.

❗ YouTube does not support autoplaying background videos on mobile devices due to limitations outside our control.

Self-hosted Videos

Requirements for Self-Hosted Videos to Play on Mobile

To ensure smooth playback on mobile devices, make sure your videos comply with these requirements:

• File format: MP4 with H.264 encoding
• Muted: The video must be muted
• File size: Keep it between 5–20MB for fast loading over mobile connections

💡 Use tools like Handbrake to compress and convert your video files.

See also:
Tips for Optimizing Self-Hosted Video Backgrounds

---

Using Elementor (Video Background in a Section)

As with the Block Editor, you can:

Edit a Starter Site homepage

If you imported an Elementor Starter Site, open the homepage with Elementor and edit the existing Hero section.

Create a new page from scratch

If starting fresh:

1. Go to Pages → Add New.

2. Select the Page Builder (Transparent Header, Without Title) template.

3. Click Edit with Elementor.

4. Add a new Section (or edit an existing one).

5. In the Style tab, under Background → Background Type, choose Video.

6. Paste a YouTube or Vimeo URL or upload your own MP4 file.

7. Add widgets like Heading or Button to the section as needed.

---

Using the Customizer (Old Method)

Earlier versions of Inspiro Lite allowed configuring the Hero Area through the Customizer:

1. Ensure your homepage is assigned with the Homepage (Page Builder) template.

2. Go to Appearance → Customize → Homepage Hero Area. Here you will encounter two sections:

• Media — where you can set up the video background for the hero area.
• Content — where you can add the textual content of the hero area such as title, description and button details.

3. In the Media section make sure to checkmark the Enable Hero Area on the Homepage option.
Then, add a YouTube or Vimeo video URL in the External Header Video field or upload a self-hosted MP4 video in the Header Video section.

Note: Vimeo and MP4 videos will play on mobile devices, while YouTube videos will not.

Note: This method is still available, but we recommend using the Block Editor or Elementor for more flexibility.

---

Add a Video Popup Icon (Block Editor)

The Video Popup option is only available when using the block editor. It adds a play button on top of your Hero Area that opens the video in a lightbox. This works with YouTube, Vimeo, and self-hosted MP4 videos.

1. Install the Video Popup Block by WPZOOM plugin.
It may already be installed if you imported demo content or installed all recommended plugins.

2. Go to the page where you have the Cover Block with the video background.

3. Inside the Cover Block, click the + icon and add the Video Popup by WPZOOM block.

Note: You can add the video popup icon anywhere in the page or post, not only with the Cover Block.

4. In the block settings panel (right sidebar), select the Video Source (YouTube, Vimeo, or MP4) and adjust the available options as needed.

5. Click Publish or Save to apply the changes.

When you visit your site, you’ll see a play button overlay that opens the video in a popup lightbox.

---

Unlock More Options with Inspiro Premium

Inspiro Lite includes the basics for setting up a Hero Area with video backgrounds.

If you want more flexibility, Inspiro Premium unlocks advanced slideshow layouts, multiple Hero designs, and additional customization options — all available with just a few clicks.