How to add a full-screen video background to my XMS Systems powered website?

A short, very short, article discussing the process to add a full-screen video background to your XMS Systems powered website.

Adding a short video the homepage of your website is a unique way to make your website interesting and get more visitors to come back.

XMS Systems do not need any special plugin or editing to the actual application. Everything can be done rather easily with a couple of lines.

Edit your home page and in the Custom CSS block, paste the following code.

.vid_sec {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
z-index: -5;
}

video, object {
position: relative;
display: flex;
min-width: 100vw;
min-height: 110vh;
object-fit: inherit;
overflow: hidden;
}

Scroll down to your Primary or Secondary Content block, click the “Source” icon to switch over to the HTML mode and paste the following code

<div class="vid_sec">
<video autoplay loop muted poster="https://www.some-website.commedia/Whale watching.png">
<source src="https://www.some-website.com/videos/Homepage_2.mp4" type="video/mp4" />
</video>
</div>

Options available when configuring the video player

autoplay
Automatically start playing the video when it is loaded
loop
Repeat the video indefinitely
muted
mute any musing from the video
poster="https://www.some-website.commedia/Whale watching.png"
define a URL to an image to display on your page while the video is loading.