above-the-fold.css

.intro {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    text-align: center;
    color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 5;
}

.intro .intro-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -1;
    background-size: cover;
    background-position: center center;
}

.intro-video video {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    max-width: 1000%;
    min-height: 100%;
    min-width: 100%;
    min-width: 100vw;
    position: absolute;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    left: 50%;
    max-width: 1000%;
}

bg.html

<figure 
  class="intro-video lazyload bg-video" 
  data-bg="https://unioncowork.com/content/uploads/2017/03/home_vid_still-7.jpg" 
  width="1280" 
  height="720" 
  style="background-color: rgb( 237,233,230);" 
  data-bg-video="{&quot;mp4&quot;:&quot;https:\/\/unioncowork.com\/content\/uploads\/2017\/03\/Opening-Header-Cinematic-1.mp4&quot;,&quot;webm&quot;:&quot;https:\/\/unioncowork.com\/content\/uploads\/2017\/03\/Opening-Header-Cinematic-1.webm&quot;}"></figure>

custom-video.js

;(function(window, document, undefined) {

test = null;

function CustomVideo() {}


	CustomVideo.prototype = {
		testResult: null,
		
		test: function() {
			var video = document.createElement( 'video' );
			if( typeof video.canPlayType === "function" ) {
				var canPlay = video.canPlayType( 'video/mp4' );
				return canPlay;
			}
			return false;
		},
		initialize: function() {

			if ( false === this.test() ) {
				return false;
			}

			var videos = document.querySelectorAll('.bg-video');

			[].forEach.call(videos, function(el) {

				var sources = el.getAttribute('data-bg-video');

				if( 0 < sources.length ) {
					sources = JSON.parse( sources );
				}

				video = document.createElement( 'video' );

				if( sources.mp4 ) {
					mp4 = document.createElement( 'source' );
					mp4.setAttribute( 'type','video/mp4' );
					mp4.setAttribute( 'src', sources.mp4 );

					video.appendChild(mp4);
				}

				if( sources.webm ) {
					webm = document.createElement( 'source' );
					webm.setAttribute( 'type','video/webm' );
					webm.setAttribute( 'src', sources.webm );

					video.appendChild(webm);
				}

				video.autoplay = 'autoplay';
				video.loop = 'loop';
				video.muted = 'muted';
				video.setAttribute('webkit-playsinline', 'webkit-playsinline');
				video.setAttribute('playsinline', 'playsinline');

				el.appendChild(video);
			});
		}
	}

	var CustVid = new CustomVideo();

	CustVid.initialize();

})(window, document);