Elementor doesn’t currently have an option to set the page background to be a full-screen video, but it is possible.
From a blank page, create a section with minimum height = 100 VH
Set the background of the section to be the video you want to use.
In this state the video will fill the screen. All good, except that it’s a section so as you add content in it, it will grow and scroll and the video will with it.
The below position fixed fix won’t work for the “Background Fallback” image, so to make your background image display correctly too upload the image somewhere and use the background url for it instead (don’t specify a “Background Fallback” image in Elementor).
Go to Page Settings > Advanced > Custom css and add this:
/*Set background video to full screen*/
.elementor-background-video-container {
position: fixed!Important;
background: url(/my-media-folder/page-background-still.jpg);
background-size: cover;
}
USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.