HTML5 Video Popup jQuery Plugin – videopopup.js

LightBox
File Size: 1.35 MB
Views Total: 2910 views
Last Update:March 29, 2022
Publish Date: January 06, 2017
Official Website: Go to website
License: MIT
Plugin Author: netteria
Demo    Download

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 jQuery script implanting a video clip in a popup window with responsive.

How to use :

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>

load the core style sheet videopopup.css

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

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>

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

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

Active the plugin with some options.

$(function () {
 $('#vidBox').VideoPopUp({
  opener: "video-trigger",
  idvideo: "demo"
  });
});

Set the background color of the modal overlay.

$('#vidBox').VideoPopUp({
  
});

Add with script for pause the video when you click on close button on modal popup.

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

Done

List Of Version :

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.