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.

How to use it:

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.