Lightweight Video Popup Plugin For jQuery - popVideo.js

popVideo.js is a customizable jQuery video popup plugin which opens and plays your HTML5 video in a responsive fullscreen lightbox popup.

How to use it:

1. Include jQuery JavaScript library together with the jQuery popVideo's stylesheet jquery.popVideo.css and JavaScript jquery.popVideo.js on the html page.

<link rel="stylesheet" href="css/jquery.popVideo.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.popVideo.js"></script>

2. Insert an HTML5 video into the page.

<video src="https://www.w3schools.com/html/movie.mp4" 
       webkit-playsinline 
       playsinline 
       data-video="https://www.w3schools.com/html/movie.mp4"
       loop muted autoplay 
       id="video" 
       class="video">

3. Call the main function popVideo on the video element and done.

$('#video').click(function () {
  $('#video').popVideo({
    // options here
  }).open()
});

4. Possible options to customize the video popup.

{

  // play on open
  playOnOpen: false,

  // close on end
  closeOnEnd: false,

  // pause on close
  pauseOnClose: true,

  // (String || Boolean)  
  closeKey: 'esc', 

  // popup title
  title: '',

  // (String || Array)
  // e.g. video:'video.mp4'
  video: '',

  // in milliseconds
  duration: 300,

  // callback functions
  callback: {
    onOpen: function (self) {},
    onClose: function (self) {},
    onPlay: function (self) {},
    onPause: function (self) {},
    onEnd: function (self) {}
  }
  
}  

Change log:

2017-12-13

• Changed styles

---

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