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

Free Download Minimal Youtube/Vimeo Modal Plugin For jQuery – modal-video

By Posted on

This time I will share jQuery Plugin and tutorial about Minimal Youtube/Vimeo Modal Plugin For jQuery – modal-video, hope it will help you in programming stack.

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

Demo Download

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:

view source
1 # Yarn
2 $ yarn add modal-video
3  
4 # NPM
5 $ 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.

view source
1 <script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
2 <script src="modal-video.min.js"></script>
3 <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:

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

3. Initialize the plugin and done.

view source
1 $(".js-video-button").modalVideo();

4. The plugin also works with Vimeo videos:

view source
1 <a href="#"
2    class="js-video-button"
3    data-video-id='202177974'
4    data-channel="vimeo">202177974
5 </a>
view source
1 // or
2 $(".js-video-button").modalVideo({
3   channel:'vimeo'
4 });

5. Config the Youtube/Vimeo player:

view source
01 $(".js-video-button").modalVideo({
02   channel: 'youtube',
03   youtube: {
04     autoplay: 1,
05     cc_load_policy: 1,
06     color: null,
07     controls: 1,
08     disablekb: 0,
09     enablejsapi: 0,
10     end: null,
11     fs: 1,
12     h1: null,
13     iv_load_policy: 1,
14     list: null,
15     listType: null,
16     loop: 0,
17     modestbranding: null,
18     origin: null,
19     playlist: null,
20     playsinline: null,
21     rel: 0,
22     showinfo: 1,
23     start: 0,
24     wmode: 'transparent',
25     theme: 'dark'
26   },
27   ratio: '16:9',
28   vimeo: {
29     api: false,
30     autopause: true,
31     autoplay: true,
32     byline: true,
33     callback: null,
34     color: null,
35     height: null,
36     loop: false,
37     maxheight: null,
38     maxwidth: null,
39     muted: false,
40     player_id: null,
41     portrait: true,
42     title: true,
43     width: null,
44     xhtml: false
45   },
46 });

6. Config the video modal:

view source
01 $(".js-video-button").modalVideo({
02   allowFullScreen: true,
03   animationSpeed: 300,
04   classNames: {
05     modalVideo: 'modal-video',
06     modalVideoClose: 'modal-video-close',
07     modalVideoBody: 'modal-video-body',
08     modalVideoInner: 'modal-video-inner',
09     modalVideoIframeWrap: 'modal-video-movie-wrap',
10     modalVideoCloseBtn: 'modal-video-close-btn'
11   },
12   aria: {
13     openMessage: 'You just openned the modal video',
14     dismissBtnMessage: 'Close the modal by clicking here'
15   }
16 });

Changelog:

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.

Related posts: