Responsive HTML5 Video Popup Plugin With jQuery - videopopup.js
File Size: | 4.57 KB |
---|---|
Views Total: | 82563 |
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 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.