Making Background Video Behave

An Avada colleague was having an issue with the background video being too large (scaled up), and after a couple of tests, there are two ways to handle this.

Use a normal video size

First and foremost, like images, the key is to use a video that is not a massive 4k or, God forbid, 8k video but scaled appropriately. Not only will this help with your layout, but it will also improve performance. Typically a 1920 x 1080 video works perfectly, and no other changes are required. If that is not possible, then the following two approaches should help.

Using absolute positioning

The first way takes advantage of absolute positioning and uses the video element instead of a background video.

Container setup

• Set the container content wdth to 100%
• Set the container’s padding to 0
• Add a 1/1 column with no padding or margin
• Set the position to absolute
• Set overflow to hidden
• Set the z-index to -1
• Add the video element
• Add additional columns for your content

This requires one line of custom CSS. Add a class to the container (I used relative) and add:

.relative{
  isolation:isolate!important;
}

This ensures that all of the absolutes positioning only impacts the parent container.

One of the big advantages of this technique is the native overlay color feature of the video element.

This same approach can be used for background images if you want to have alt text for a background image (not always the best solution).

Using a background video

Because the previous solution requires a little more effort for content, using the background video option may be the preferred solution. Making this work requires also requires one line of custom CSS. I recommend placing this at the page level, and in some cases — more than one video on a page (please don’t) — may require the addition of a class on the container for increased specificity.

.fullwidth-video video {
  max-width:100vw
}

I put together a demo. In both examples, I am using a minimum container height of 80vh