Add & edit a background video in Elementor

You can set a video as the background of a Section or Container, enabling you to create interesting hero headers and other engaging areas on your page.

---

Enabling the background video feature

Using videos as a background for your pages and elements can make them more exciting and dynamic.

Add a video background

In the example below, we’ll turn the hero section background into a video background and examine some styling options for the background.

We’ll start with an existing home page.

1. Select the hero section’s container.
2. Click the Style tab.
   
3. In the Background Type section, click the video icon.
   
4. In the Video Link section, add a link to the video. This can be a YouTube video, a Vimeo video or a self-hosted video.
   
5. (Optional)Use the video options to customize the clip that appears in the background.
   See below for a list of these options.
   
   

• Start time: If you don’t want the video to start at its beginning, use the text box to choose when the video begins.
• End Time: If you don’t want the video to run to the end, use the text box to choose when the video stops.
• Play Once: Toggle to Yes if you only want the video to display one time.
• Play On Mobile: Toggle to Yes if you want don’t want the video to run on smaller screens.
• Privacy Mode: Toggle to Yes if you want to limit this feature to YouTube videos.
• Background Fallback: Select an image that will be used if the video is unavailable for some reason.

Use a background overlay to edit the video

You can use the Background Overlay settings to further change the look of the video background.

1. Open the Background Overlay section.
   
2. Choose a color to insert over the video. For details, see Choose a color or Use global fonts and colors.
   
   Tip

   Choose a lighter, less opaque image if you want to see the video through the overlay.
   
   
3. (Optional)Click the Hover tab to create a separate background overlay that activates when users mouse over the container.
   
4. Use the Opacity slider to increase or decrease the transparency of the overlay.
   

Troubleshooting

Issues with autoplay

Background Video Autoplay doesn’t autoplay when the following are active:

iOS Devices

Your power-saving mode is on: Enabling power-saving mode prevents ANY video from auto-playing, as your phone is trying to save as much battery as possible.

In order to fix this, go to your phone settings and then disable the option.

Android Devices

Data Saver is on: It will prevent any videos from auto-playing.

Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.

Related videos and titles showing

YouTube

Related videos: YouTube changed their API in September, 2018 and does not allow the possibility to disable related videos any longer. The parameter “rel=0” is no longer a working parameter.

Titles: Background videos now briefly show the title of the video. Elementor cannot disable this as it is controlled solely by YouTube.

Vimeo

Controls and titles: Only Vimeo premium accounts can remove Vimeo background video controls and titles.