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="//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"
});

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