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;
}
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *