Responsive HTML5 Video Popup Plugin With jQuery - videopopup.js

Responsive HTML5 Video Popup Plugin With jQuery - videopopup.js
File Size: 4.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

videopopup.js is a lightweight video lightbox plugin which displays and plays your HTML5 video in a responsive, configurable modal popup.

See also:

How to use it:

1. Load the latest version of jQuery JavaScript library (Slim build is recommended) and the jQuery videopopup.js script in the html page.

<script src="//"></script>
<script src="js/videopopup.js"></script>

2. load the core style sheet videopopup.css in the header section to style the video popup.

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

3. Add your own HTML5 videos to the modal popup.

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

4. You might need a trigger element to open the video popup.

<a href="javascript:void(0)" id="video-trigger">Open</a>

5. Active the plugin with some options.

$(function () {
  opener: "video-trigger"
  idvideo: "demo"

6. Set the background color of the modal overlay.

  backgroundColor: "#000000"

7. Pause the video when you close the modal popup.

  pausevideo: true

8. Set the maximum width of the HTML5 video.

  maxweight: "640"

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