dr-eric of Spear Code Hub
4/12/2018 - 7:35 PM

Quick Lightbox by Lity

This javascript allows you to bind a lightbox to an image (using the image's ID of #bannerImage) with a click. Put the first .js bit on the initial page and on the page that loads, put the .html below. Of course, please change all variables to the videos, LPs, src .js and .css files.

.html
content_copyfile_download
<video id="my-video" class="video-js" controls autoplay preload="auto" width="964" 
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="https://pages.cbps.canon.com/rs/879-RFY-317/images/Canon%20LegalWeek%20Final%20-%20720pHD%20-%2030MB.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="https://vjs.zencdn.net/6.6.3/video.js"></script>
.js
content_copyfile_download
<link href="https://pages.cbps.canon.com/rs/879-RFY-317/images/lity.css" rel="stylesheet">
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"
  type="text/javascript"></script>
<script src="https://pages.cbps.canon.com/rs/879-RFY-317/images/lity.js" type="text/javascript"></script>
<script type="text/javascript">
	var $jQ = jQuery.noConflict();
	$jQ(document).ready(function(){		
		$jQ("#bannerImage").click(function(){
			lity('https://pages.cbps.canon.com/Video-LegalWeek.html');
		});
	});
</script>