Lightweight Video Popup Plugin For jQuery - popVideo.js

File Size: 39.9 KB
Views Total: 7755
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="js/jquery.popVideo.js"></script>

2. Insert an HTML5 video into the page.

<video src="" 
       loop muted autoplay 

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

$('#video').click(function () {
    // options here

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:


  • Changed styles

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