HTML5 Video Popup jQuery Plugin – videopopup.js

LightBox
File Size: 1.35 MB
Views Total: 3945 views
Last Update:September 24, 2022
Publish Date: January 06, 2017
Official Website: Go to website
License: MIT
Plugin Author:
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

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
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.

Related jQuery Plugins

You Might Also Like