HTML5 Video Popup jQuery Plugin – videopopup.js

LightBox
Demo    Download
Responsive HTML5 Video Popup Plugin With jQuery - videopopup
File Size: 1.35 MB
Views Total: 152 views
Last Update:October 4, 2020
Publish Date: October 4, 2020
Official Website: Go to website
License: MIT

A Free jQuery Plugin with videopopup.js is a lightweight video lightbox plugin which displays and plays your HTML5 video and Youtube video in a responsive, configurable modal popup. A simple jquery script embedding a video clip in a modal window with responsive.

How to use :

1. Load the latest version of jQuery JavaScript library and jQuery videopopup.js.

<script src="jquery-3.1.1.slim.min.js"></script>
<script src="js/videopopup.js"></script>

2. load the core style sheet videopopup.css

<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({
  
});

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

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


Nola Arney

Nola Arney is a full stack web developer who has worked at companies of various shapes and sizes, and with technologies just as diverse. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.