Customizable jQuery Video Lightbox Extension That Allows Playing Youtube / Vimeo Videos

Modal Video is a simple, accessible, and customizable jQuery video lightbox extension that allows playing Youtube / Vimeo videos in an animated modal window while clicking on the video link.

modal video popup, play video in modal popup, video modal popup, modal video popup html, modal video player, modal video github, video popup jquery

Features:

  • It is not affected by the DOM structure.
  • Nice transition
  • It can be accessed to navigate with keyboard and screen readers.
  • Rich options for youtube API and Vimeo API

How to make use of it:

Installation:

# Yarn
$ yarn add modal-video

# NPM
$ npm install modal-video --save

1. Put each jQuery library and the jQuery modal-video plugin’s information on the bottom of the HTML web 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 utilizing the ‘data-video-id’ attribute like this:

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

3. Initialize the plugin and completed it.

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

4. The plugin additionally works with Vimeo videos:

<a href="#" 
   class="js-video-button" 
   data-video-id=' ' 
   data-channel="vimeo"> 
</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'
  }
});

Minimal Youtube/Vimeo Modal Plugin, Modal Video Github


See Demo And Download

Official Website(appleple): Click Here

This superior jQuery/javascript plugin is developed by appleple. For extra Advanced Usage, please go to the official website.

Share