- author: Michelle Nobelis
How to Add a Video Background in Elementor for Free
Are you looking to add some visual interest to your WordPress website built with Elementor? Then adding a video background is one of the best ways to engage your visitors. This tutorial will show you how to add a video background in Elementor for free. Moreover, it will also explain how you can add a video background with sound and text overlay.
Prerequisites
- A WordPress website with Elementor installed.
- YouTube link for video or a self-hosted video (optional).
Adding a Mute Video Background
Follow these steps to add a mute video background:
Install Elementor or use the existing version on your WordPress website.
Go to Pages, and select the page you want to edit or add a new page.
If you want to hide page elements such as header and footer, go to Theme Settings, and change the page layout to Elementor canvas.
Add a new section and choose a single column layout.
Change the section height to fit to screen.
Select the section and go to the Style settings.
Choose the background type and select video.
Add the YouTube link or self-hosted video link.
Add your desired content such as heading, text, button, icons, etc.
Save and publish the page.
Adding a Video Background with Sound and Text Overlay
To add a video background with sound and text overlay, follow these steps:
Add a new section with a single column layout.
Instead of a regular background video, use the video element from the Elementor library.
Add the YouTube link, self-hosted video link, or any other video link.
Customize the video settings such as start time, end time, autoplay, and control options.
Add a new section with desired content such as heading, text, button, spacer, etc.
Set the Z index for both sections by giving a numeric value.
Use the margin option to position the second section over the video.
Save and publish the page.
To add additional sections, use the plus icon or the template icon in the Navigator.
Additional Tips and Tricks
Change the content width to full width and set the padding to zero to remove the white space.
Use the Navigator to edit and navigate between different sections.
You can add multiple sections and customize their alignment, margin, and Z index as needed.
To include a self-hosted video, upload the video to your website and provide the link in the video settings.
Adding a video background is an excellent way to make your WordPress website more visually appealing and engaging. By following the tutorial, you can add a mute and a sound video background with text overlay for free using Elementor. With additional customization options and tricks, you can create a stunning website that stands out from the competition.