Responsive HTML5 Video Popup Plugin With jQuery - videopopup.js

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

See also:

• Responsive Youtube & Vimeo Video Lightbox Plugin - YouTubePopUp
• Tiny jQuery Youtube/Vimeo Video Lightbox Plugin - Lightbox Video

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="//code.jquery.com/jquery-3.1.1.slim.min.js"></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">
    </video>
   </div>
</div>

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 () {
 $('#vidBox').VideoPopUp({
  opener: "video-trigger"
  idvideo: "demo"
  });
});

6. Set the background color of the modal overlay.

$('#vidBox').VideoPopUp({
  backgroundColor: "#000000"
});

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

$('#vidBox').VideoPopUp({
  pausevideo: true
});

8. Set the maximum width of the HTML5 video.

$('#vidBox').VideoPopUp({
  maxweight: "640"
});

9. The plugin also supports Youtube videos:

<a href="javascript:void(0)" id="trigger">-- open video --</a>
<div id="vidBox">
  <div id="videCont">
    <div id="yt_video">
      <iframe id="example" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/JjtRj5ybloY"></iframe>
    </div>
  </div>
</div>

$('#vidBox').VideoPopUp({
  backgroundColor: "#17212a",
  opener: "trigger",
  maxweight: "640",
  idvideo: "example" 
});;

Changelog:

2019-04-12

• Supports Youtube videos

---

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