Minimal Youtube/Vimeo Modal Plugin For jQuery - modal-video
File Size: | 283 KB |
---|---|
Views Total: | 24037 |
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.
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.