V4 Extentions Background-Video Estimated reading: 4 minutes 7 views Play a looping video behind a Flexbox, Div Block or Grid. Elementor V4 Background has color, image and gradient only. This extension adds video. No code needed. WORKS ON Flexbox, Div, Grid VIDEO MP4 file or link PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons for Elementor before you start. Pro is not needed. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Utility Extensions, turn on Background Video. Click Save Settings. Background Video Extension 1 (click to zoom) STEP 2 Add a Background Video Now add a video to any container in the Elementor editor. Open your page with the Elementor Editor. Select a Flexbox, Div Block or Grid. In the General tab, open the Background Video section. Turn on Enable. Choose your Source and add your video. Background Video Extension 2 (click to zoom) That is all. Your video now plays behind the content of that container. RESULT Final Result Background Video Extension 3 Note: The video is muted and loops. It stays behind your content, so headings, text and buttons inside the container stay on top. SETTINGS Settings These settings control which video plays and where it plays. Background Video Extension 4 (click to zoom) Enable Default: OffTurn the background video on or off for this container. Source Default: Media FileChoose where the video comes from. Media File uses a video from your Media Library. External URL uses a link to a video file. Background Video Extension 5 (click to zoom) Video File Pick or upload your video. Shows when Source is Media File. Tip: Use MP4. It is the safest choice. WebM and OGG do not work everywhere. Video URL Paste a direct link to a video file, ending in .mp4. Shows when Source is External URL. Note: A YouTube link or a normal page link will not play. Use the direct link to the video file. Poster Image An image that shows until the video can play. It also shows instead of the video on devices that skip playback. Play Once Default: OffBy default the video loops. Turn this on to play it one time. Play On Mobile Default: OffAutoplay video uses a lot of mobile data, so phones show the poster image instead. Turn this on if you want the video on phones too. PER DEVICE Different Video Per Screen Size Every setting except Enable can change per screen size. Use the Desktop, Tablet and Mobile buttons at the top of the editor. Use a big video on desktop and a lighter video on tablet. Use a different poster image on mobile. Turn Play On Mobile on only when your video is small. Tip: Short and small videos load faster. Always add a Poster Image so visitors see a picture while the video loads. TRY THIS Quick Recipe Not sure where to start? Use this safe setup. SOURCE Media File FORMAT MP4 POSTER Added PLAY ON MOBILE Off NEED HELP? Troubleshooting I do not see the Background Video section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Background Video. Then reload the editor. The section shows for Flexbox, Div Block and Grid only, not for widgets. The video does not play Make sure Enable is on and the page is saved. Check that the field for your Source is filled: Video File for Media File, or Video URL for External URL. Use an MP4 file, and a direct link, not a YouTube or page link. I only see an image on my phone Phones show the Poster Image by default. Turn on Play On Mobile to play the video. Visitors who turned on reduce motion in their device settings also see the poster image. You Did It Your container now plays a video behind its content. If you face any problem, please contact our support team. We are happy to help.
