Do you want to add a video background in Elementor? A video background adds dynamism and engagement to any section and can communicate a message in a way that static images cannot.
With the Row Background widget from The Plus Addons for Elementor, you can add a video background to any container or section in the Elementor editor.
Best Used For:
- Agency landing pages and hero sections that need engaging, high-impact visual backgrounds
- SaaS and product websites where a video loop showcases the product in action
- Portfolio and creative agency sites where video backgrounds create an immersive first impression
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated to use all its features.
To add a video background, add the Row Background widget to the container and follow the steps:
1. Select Creative Background Video from the Select Option dropdown, under the Deep Layer tab.
2. From the Video Source dropdown, select the video source. Three options are available:
- Self Hosted – To show a self-hosted video as the background. Use this when you want full control over file quality, format, and load time without depending on a third-party platform.
- YouTube – To use a YouTube video as the background. Use this when you already have a brand or product video on YouTube and want to embed it without hosting the file yourself.
- Vimeo – To use a Vimeo video as the background. Use this when you need higher video quality and privacy controls compared to YouTube, particularly for premium or client-facing content.
For this example, select YouTube.
3. In the Enter YouTube Video ID field, add the YouTube video ID of the video you want to use.
Note: For Vimeo video, you have to add the Vimeo video ID.
Enable the Loop toggle to make the video repeat continuously. Use this when the video is a seamless loop clip, so visitors never see the video end and restart.
Enable the Mute toggle to silence the video. Use this on hero sections where you want the visual without audio, since most browsers block autoplaying videos with sound.
In the Fallback Image section, add a static image that appears when the video cannot load, such as on unsupported browsers or slow connections.
Enable the Parallax Background Video toggle to fix the video in the background as the visitor scrolls. Use this for depth effects on landing pages where you want the foreground content to scroll over a fixed video background.
Enable the Responsive Fallback Image toggle to set different fallback images for tablet and mobile views.
Enable the Responsive Bg Video toggle to use different self-hosted videos for tablet and mobile. Use this when your desktop video is too wide or too large for smaller screens.
The video will now play in the container or section background. For a simple video background, no settings in the other layers are required.
Also read, How to Add a Self-Hosted Video in Elementor.
Also read, How to Create an Elementor Background Slideshow.
