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

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.

 

  • Replace the URL of the video with the source of your own video.
  • Update the page and you are done!!

You can download a video to play with here

Written by:  - 28 Jun  
comments powered by Disqus
flashy