Basic HTML5 Video Lightbox Plugin - jQuery VideoPopup.js

The VideoPopup.js jQuery plugin enables your visitors to open and play an HTML5 video in a customizable modal popup.

The plugin also provides an option to remember the last played position of your Video when close the video lightbox.

1. Load the latest version of jQUery JavaScript library (slim build) in your webpage.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

2. Load the jQuery VideoPopup.js plugin's JavaScript and Stylesheet in the webpage.

<link rel="stylesheet" href="css/videopopup.css">
<script src="js/videopopup.js"></script>

3. Embed your HTML5 video into the lightbox.

<div id="vidBox">
  <div id="videCont">
    <video autoplay id="example" loop controls>
      <source src="1.mp4" type="video/mp4">
      <source src="1.ogg" type="video/ogg">
    </video>
  </div>
</div>

4. Create an element to lanuch the video lightbox.

<a href="javascript:void(0)" id="trigger">
  Launch
</a>

5. Enable the trigger element to open the video lightbox.

$(function() {
  $('#vidBox').VideoPopUp({
    // trigger element
    opener: "trigger",
    // video ID
    idvideo: "example"
    
  });
});

6. Determine whether or not to save the current position on close.

$(function() {
  $('#vidBox').VideoPopUp({
    // trigger element
    opener: "trigger",
    // video ID
    idvideo: "example",
    // default: false
    pausevideo: true
  });
});

7. Customize the background color of the video lightbox.

$(function() {
  $('#vidBox').VideoPopUp({
    // trigger element
    opener: "trigger",
    // video ID
    idvideo: "example",
    // default: #000000
    backgroundColor: "#17212a"
  });
});

This awesome jQuery plugin is developed by 3mpe. For more Advanced Usages, please check the demo page or visit the official website.