JavaScript CSS HTML
Clone or download
Latest commit 810fe8f Jul 6, 2018

Modal Video

Modal Video Library


  • Not affected by dom structure.
  • Beautiful transition
  • Accessible for keyboard navigation and screen readers.
  • Rich options for youtube API and Vimeo API


via npm

npm install modal-video --save

or yarn

yarn add modal-video

Short Sample


<button class="js-modal-btn" data-video-id="XJS_UYNq4No">Open Video</button>
new ModalVideo('.js-modal-video');


<button class="js-modal-btn" data-video-id="202177974">Open Vimeo</button>
// import ModalVideo from 'modal-video';
new ModalVideo('.js-modal-video', {channel: 'vimeo'});


About YouTube options, please refer to

About Vimeo options, please refer to

properties default
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'
nocookie false
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
ratio '16:9'
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'