endurain
9/21/2019 - 2:52 PM

jquery video popup that can be used to show a video on popup. Place this code directly in the file/template that it is to be used on (homepa

jquery video popup that can be used to show a video on popup. Place this code directly in the file/template that it is to be used on (homepage.php) for example.

videopopup
content_copyfile_download
<script>



jQuery(document).ready(function($){
  $(function() {
      overlay.init();
  });


  var overlay = {
  		init: function() {
  				var self = this;

  				$('body').append('<div class="overlay"><div class="modal-video"><div class="video-wrapper"></div></div><div class="close-video"></div></div>');

  				//open
  				$('.play-video').on('click', function(e) {
  						e.preventDefault();
  						self.show();
  						self.video($(this).attr('data-video-id'));
  				});

  				//close
  				$('.close-video, .overlay').on('click', function() {
            var vid = document.getElementById("larrysonsvid");
  						self.hide();
              // silence our video on exit
              // vid.pause();
              // location.reload();
  				});

  				$(document).on('keyup', function(e) {
  						if (e.keyCode == 27) {
  								self.hide();
  						}
  				});
  		},

  		show: function() {
  				$('.overlay').addClass('active');
  				$('.modal-video').addClass('active');
  		},

  		hide: function() {
  				$('.overlay').removeClass('active');
  				$('.modal-video').removeClass('active');
  				$('video').remove();
  		},

  		video: function(videoID) {
  				var embed = $('.video-wrapper');
          embed.append('<div><video style="position:absolute;width:100%;top:50%;left:50%;transform: translate(-50%,-50%);" id="larrysonsvid" autoplay controls><source src="/wp-content/uploads/2019/08/Larry_&_Sons_20190813LoRes.mp4" type="video/mp4"></video></div>');
  		}
  };


});


</script>