Hi all,
This is what worked for me...
I created a new Header Type in the Theme>Edit HTML CSS section of the editor. Call it whatever you like - mine's HeaderWithBGVideo.
In the <head> add the content below <style> video.... </style> (marked red)
The next step it to add content to the header div .... (marked red)
Upload your files to the Theme section and then change the file locations in the code (marked green) below to suit your file names.
This could look different to yours depending on your theme.
Once you're done, then go back to the main page where you want the video and change the Header Type to be HeaderWithBGVideo.
Hope that gets you in the right direction.
Cheers,
Mark
<!DOCTYPE html>
<html>
<head>
<style>
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('http://YOURSITE/FALLBACK-IMAGE.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
</style>
</head>
<body class='header-page page-has-banner wsite-theme-light'>
<div class="wrapper">
<div class="birdseye-header">
<div class="nav-wrap">
<div class="container">
<div class="logo"></div>
<div class="nav desktop-nav">{menu}</div>
<label class="hamburger"><span></span></label>
</div>
</div>
</div>
<div class="banner-wrap">
{{#header}}
<div class="container">
<div class="banner">{content}</div>
</div>
<video poster="http://YOURSITE/FALLBACK-IMAGE.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://YOURSITE/YOUR-VIDEO.mp4" type="video/mp4">
</video>
{{/header}}
</div>
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div><!-- /.wrapper -->
<div id="navMobile" class="nav mobile-nav">
<label class="hamburger"><span></span></label>
{menu}
</div>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
<div style='display:none'>{title}</div>
</body>
</html>
