Wistia full screen video

gistfile1.txt

var fullScreenVideo = {
  name: 'fullScreenVideo',
  layVideo: 'fji9juvptr',
  overlayVideoDiv: '#wistia_fji9juvptr',
  backgroundvideo: 'z1ggfo8f86',
  backgroundideoDiv: '#wistia_z1ggfo8f86',
      
  /**
   * This will call Wistia and embed the two videos
   * @param None
   */
  embedVideo: function()
  {
    var videoOptions = {};
    
    // Add the crop fill plugin to the videoOptions
    Wistia.obj.merge(videoOptions, {
      plugin: {
        cropFill: {
          src: "//fast.wistia.com/labs/crop-fill/plugin.js"
        }
      }
    });

    // Video in the background
    wistiaEmbed = Wistia.embed(fullScreenVideo.backgroundvideo, videoOptions);
  
    // Video to be shown in the overlay
    overlayEmbed = Wistia.embed(fullScreenVideo.overlayVideo, videoOptions);


    /**
     * We load the thumbnail in the background while we wait
     * for the video to load and play. Once loaded, we pause, reset to 
     * frame zero, show the video then play it.
     */
    wistiaEmbed.bind("play", function(){
      wistiaEmbed.pause();
      wistiaEmbed.time(0);
      $(fullScreenVideo.backgroundideoDiv).css('visibility', 'visible');
      wistiaEmbed.play();
      return this.unbind;
    });
  }
  
  playVideo: function()
  {
    $(fullScreenVideo.overlayVideoDiv).css("left", 0).css("visibility", "visible");
    overlayEmbed.plugin.cropFill.resize();
    overlayEmbed.play();
  }
  
  exitVideo: function()
  {
    $(fullScreenVideo.overlayVideoDiv).css("left", -3000).css("visibility", "hidden");
    overlayEmbed.pause();
    overlayEmbed._keyBindingsActive = false;
  }
}


/* 
  now to embed the video
  this should start playing the background video
*/
fullScreenVideo.embedVideo();

/*
  you can bind a click handler to fullScreenVideo.playVideo 
  to start the overlay video
  
  $('.myPlayButton').on('click', fullScreenVideo.playVideo);
  
  Same goes for stopping the video
  
  $('.myStopButton').on('click', fullScreenVideo.exitVideo);
*/