Background Video

This article will describe how you can setup a background video to your slide or brief.

Adding a Video

First you’ll need to add a video to the document using the Fusion Video Player.

Add a thumbnail and video file using the video player properties panel.

Also change position and size properties so that it matches the following screenshot:

Update the settings to autoplay and mute (mute is automatically set when choosing autoplay).

Note: in 2.1.2 and below, there is a bug that show the video controls even if the toggle is ‘false’ from the beginning. To remove the controls, toggle the ‘Show controls’ back and forth (so it ends at ‘false’ again).

Also, add a class to the video element, e.g. ‘background-video’. We will need this to add a little bit of custom CSS.

Custom CSS

In order to make sure the video stays in the background and covers the entire view, we need to add a little bit of custom CSS. We can do this by manually adding the rule to the main.css file in the shared folder: Make Manual Updates to CSS and JS.

The rules are simple to ensure the video itself will fill the entire height of the window.

CODE

.background-video video {
  z-index: -1;
  width: 100vw;
  height: 100vh;
}