Background Video
Your Title Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit eros vitae tempus. Donec sodales tortor eget mi venenatis consequat.
Requirements
You must include the following code in the <head> of the page.
<script type="application/javascript">
var video = document.getElementById("myVideo");
</script>
Include the following CSS in the page.
.videoSlat {
height: 40em; /*or whatever height you want*/
position: relative;
background-color: #24316a; /*or any other color*/
}
.videoContainer{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#myVideo {
position: absolute;
z-index: 0;
width: 100%;
}
Optional transparent image overlay:
.videoImageOverlay {
position: absolute;
bottom: 6em; /* for example */
right:0em; /* for example */
}
The HTML to insert
<div class="videoSlat">
<div class="videoContainer">
<video id="myVideo" autoplay muted loop >
<source type="video/mp4" src="video/FILENAME.mp4" >
</video>
<div class="videoTextContent">
<h2>Your Title Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum blandit
eros vitae tempus. Donec sodales tortor eget mi venenatis consequat.
</p>
</div>
//optional transparent image overlay...
<div class="videoImageOverlay">
<img alt="dice" src="images/dice.png" />
</div>
</div>
</div>
NOTE: you may want to use media queries to install breakpoints for the height attribute of the .videoSlat class. If you don't, the container will be taller than the video and a bar matching the color of the background-color attribute will be visible on smaller screens like iPads. Alternatively, you can use break points to turn width:100%; OFF and turn height:100%; ON for the #myVideo id at small screen sizes.
If you want a static image to show while the video is loading, add the following attribute to the <video> tag
poster = "filename.jpg"
