Landing Page with Html5 Video as a Background

To place an Html5 video in the center of a landing page and possibly use it as the background you have to structure your content a certain way and put a little css code on the page.

Make the background of your web page a video
It is not possible at this time to make the actual background of body tag a video. But you can make your video fill the entire screen and position it behind everything. This will make the video the background of your web page.

Place the code in the box below inside one Content Area 1

<video autoplay loop id="myvideo">
 <source src="http://www.yoursite.com/thevideo.mp4" type="video/mp4">
</video>

Then, put the code below in the Custom Code box of your landing page.

<style>
video#myvideo { 
   position: fixed; right: 0; bottom: 0;
   min-width: 100%; min-height: 100%;
   width: auto; height: auto; z-index: -100;
   background: url(polina.jpg) no-repeat;
   background-size: cover; 
}
</style>

Checkout this link to see an in depth tutorial on using a video as your web page’s background.

Make a video the background of a div
In your content area, say Content Area 1, you would put the following code, replacing the video url with your url.

<div id="backgroundVideo">
<video controls>
  <source src="http://www.yoursite.com/thevideo.mp4" type="video/mp4">
</video>
</div>

Then, put the code below in the Custom Code box of your landing page.

<style>

#backgroundVideo{
   margin:0 auto;
   width:100%;
}

video{
    max-width:100% !important;
    height:auto;
    display:block;
}

</style>

Finally, publish or save as draft and preview.