Minimal Youtube/Vimeo Modal Plugin For jQuery - modal-video

Minimal Youtube/Vimeo Modal Plugin For jQuery - modal-video
File Size: 156 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A simple, accessible, customizable jQuery video lightbox plugin that allows to play Youtube/Vimeo videos in an animated modal window as you click on the video link.


# Yarn
$ yarn add modal-video

$ npm install modal-video --save

How to use it:

1. Put both jQuery library and the jQuery modal-video plugin's files at the bottom of the html page.

<script src="//"></script>
<script src="modal-video.min.js"></script>
<link rel="stylesheet" href="modal-video.min.css">

2. Create a video link and specify the video ID using the 'data-video-id' attribute as this:

<a href="#" class="js-video-button" data-video-id='NILlCqOqyNI'>Yotube Video</a>

3. Initialize the plugin and done.


4. The plugin also works with Vimeo videos:

<a href="#" 
// or 

5. Config the Youtube/Vimeo player:

  channel: 'youtube',
  youtube: {
    autoplay: 1,
    cc_load_policy: 1,
    color: null,
    controls: 1,
    disablekb: 0,
    enablejsapi: 0,
    end: null,
    fs: 1,
    h1: null,
    iv_load_policy: 1,
    list: null,
    listType: null,
    loop: 0,
    modestbranding: null,
    origin: null,
    playlist: null,
    playsinline: null,
    rel: 0,
    showinfo: 1,
    start: 0,
    wmode: 'transparent',
    theme: 'dark'
  ratio: '16:9',
  vimeo: {
    api: false,
    autopause: true,
    autoplay: true,
    byline: true,
    callback: null,
    color: null,
    height: null,
    loop: false,
    maxheight: null,
    maxwidth: null,
    player_id: null,
    portrait: true,
    title: true,
    width: null,
    xhtml: false

6. Config the video modal:

  allowFullScreen: true,
  animationSpeed: 300,
  classNames: {
    modalVideo: 'modal-video',
    modalVideoClose: 'modal-video-close',
    modalVideoBody: 'modal-video-body',
    modalVideoInner: 'modal-video-inner',
    modalVideoIframeWrap: 'modal-video-movie-wrap',
    modalVideoCloseBtn: 'modal-video-close-btn'
  aria: {
    openMessage: 'You just openned the modal video',
    dismissBtnMessage: 'Close the modal by clicking here'

Change log:


  • v2.2.3


  • Fixed for IE9


  • v2.2.1: use getelementbyid method to find modal dialog


  • v2.2.0


  • v2.1.2: [fixed] option bug


  • v2.1.1: [added] data-channel option

This awesome jQuery plugin is developed by appleple. For more Advanced Usages, please check the demo page or visit the official website.