Minimal Responsive Video Lightbox Plugin For jQuery - Video Modal

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.