IN PROGRESS

generate-video.js

function loadCoverVideo(video) {
    if (video && video.readyState === 4) {
        // If video is assembled & loaded, add .is-loaded to video element
        video.className += ' is-loaded';
    } else {
        // Keep checking until video is assembled & loaded
        setTimeout(function(){ loadCoverVideo(video) }, 250);
    }
}

function addSource(video, src, type) {
  var source = document.createElement('source');
  source.src = src;
  source.type = 'video/' + type;
  video.appendChild(source);
}

function assembleVideo(videoParamEl, destinationId) {

	    // Define variable to hold video data
	    var videoSources = [];

	    // Build the video tag and add it to .video-inner
      var newVideo = document.createElement('video');
      newVideo.className += 'cover-video';
      newVideo.id = 'coverVideo';
      newVideo.autoplay = true;
      newVideo.loop = true;  
  
      // Store data-types
	    videoSources['webm'] = videoParamEl.dataset.webm;
	    videoSources['mp4'] = videoParamEl.dataset.mp4;
  
	    $('<video class="cover-video" id="coverVideo" preload="auto" autoplay loop><source src="' + $videoSources['webm'] + '" type="video/webm"><source src="' + $videoSources['mp4'] + '" type="video/mp4"></video>').;
      document.getElementById(destinationId).appendChild(newVideo);
      addSource(newVideo, videoSources, 
	    // Load Cover Video
	    loadCoverVideo(newVideo);
	}




	// Make video fullscreen

	function setFullHeight (target, offset) {
	    var target = $(target);
	    var offset = $(offset).outerHeight() || 0;
	    var $viewportHeight = $(window).height() - offset;

	    target.css('height', $viewportHeight);
	}

	setFullHeight('#cover');
	$(window).resize(function() {
	    setFullHeight('#cover');
	});