Minimal Responsive Video Lightbox Plugin For jQuery - Video Modal
File Size: | 11 KB |
---|---|
Views Total: | 6064 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Video Modal is an easy jQuery video lightbox plugin that allows you to play an html5 video in a fullscreen, responsive modal popup with custom controls.
How to use it:
1. Load the core stylesheet and a theme CSS of your choice in the head section of the webpage.
<link rel="stylesheet" href="videomodal.css"> <link rel="stylesheet" href="videomodal.defaulttheme.css">
2. Load Font Awesome 4 for custom video controls.
<link rel="stylesheet" href="font-awesome.min.css">
3. Embed an Html5 video with a post image into the modal.
<div id="video-modal" class='video-modal'> <video loop autoplay muted="" src="1.mp4" poster="1.jpg" id="homepage-video"></video> <div class="controls"> <a href="#" class='play fa fa-play'></a> <a href="#" class='pause fa fa-pause'></a> <a href="#" class='scrub'><span class="marker"></span></a> <a href="#" class='close fa fa-close'></a> </div> </div>
4. Load jQuery library and the jQuery Video Modal plugin's script at the end of the document.
<script src="jquery.min.js"></script> <script src="videomodal.jqueryplugin.js"></script>
5. Initialize the plugin.
$('#video-modal').videoModal(); var modal = $('#video-modal').data("videoModal");
6. Open the video lightbox.
modal.open(true);
This awesome jQuery plugin is developed by ninapavlich. For more Advanced Usages, please check the demo page or visit the official website.