Add an HTML 5 background video as a header image using the following code. In this example, the background video would be uploaded in the first Page Content node, which includes two items: 1. A video, and 2. A fallback image.

More information about HTML background videos, required formats, and styling can be found at the following links (from which most of the following code has been adapted):

• https://html5backgroundvideos.com/how-to-create-a-html5-background-video-using-html-css-and-javascript/
• https://webkit.org/blog/6784/new-video-policies-for-ios/

<div class="hero wide">
  <cfoutput>
  <video class="bgvid" autoplay loop muted playsinline poster="#pcItem_1_1_2#">
    <source src="#pcItem_1_1_1#" type="video/mp4">
  </video>
  </cfoutput>
</div>

.hero {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;       
}

.bgvid {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}

/*
 *  Use the following to add a darkened overlay on top of the video
 *  (usually necessary for legibility if there will be text on top)
 */
 
.hero:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .25;
  z-index: 2;
}

If we want to detect when the video starts playing and fade it in:

1. Add the class name .fade-in-video to the video element.

<video class="bgvid fade-in-video" autoplay loop muted playsinline poster="#pcItem_1_1_2#">
  <source src="#pcItem_1_1_1#" type="video/mp4">
</video>

2. Add the following to our CSS:

.fade-in-video {
  opacity: 0;
  transition: opacity .4s linear;
}

.fade-in-video.is-playing {
  opacity: 1;
}

3. Add the following JavaScript to our layout file:

var fade_in_videos = document.querySelectorAll('.fade-in-video');
for( i=0; i<fade_in_videos.length; i++ ) {
    fade_in_videos[i].addEventListener("playing", function(){
        this.className += ' is-playing';
    });
}

4. Add this to the Config File

<content name="Header Video" action="" count="1" pageoverride="0" xmloverride="">
<item name="Header Video File" type="file" />
</content>