
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.
- Publication date: 20.09.2018
- Source