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

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.

Installation:

# Yarn
$ yarn add modal-video

# NPM
$ 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="//code.jquery.com/jquery-3.6.0.slim.min.js"></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.

$(".js-video-button").modalVideo();

4. The plugin also works with Vimeo videos:

<a href="#" 
   class="js-video-button" 
   data-video-id='202177974' 
   data-channel="vimeo">202177974
</a>

// or 
$(".js-video-button").modalVideo({
  channel:'vimeo'
});

5. Config the Youtube/Vimeo player:

$(".js-video-button").modalVideo({
  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,
    muted: false,
    player_id: null,
    portrait: true,
    title: true,
    width: null,
    xhtml: false
  },
});

6. Config the video modal:

$(".js-video-button").modalVideo({
  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'
  }
});

Changelog:

v2.4.6 (2021-08-26)

• Bugfixes

v2.4.5 (2021-07-27)

• Fixed All modals for youtube displaying "This video is unavailable."

2021-06-16

• v2.4.4

2021-05-25

• Fixed close button position for mobile

2020-08-03

• Add the muted argument to the vimeo controls

2020-03-04

• v2.4.2: add allow="autoplay" to iframe tag

2018-05-22

• v2.4.1: support playing video url

2018-04-10

• fix getfacebookurl method

2018-03-14

• v2.2.3

2018-03-13

• Fixed for IE9

2018-02-15

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

2017-10-13

• v2.2.0

2017-09-12

• v2.1.2: [fixed] option bug

2017-09-12

• 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.