Need help with modal-video?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

250 Stars 82 Forks MIT License 102 Commits 39 Opened issues

Services available


Need anything else?

Contributors list

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


Open Video
new ModalVideo('.js-modal-btn');


Open Vimeo
// import ModalVideo from 'modal-video';
new ModalVideo('.js-modal-btn', {channel: 'vimeo'});


Open Video
new ModalVideo('.js-modal-btn');


Open Video
new ModalVideo('.js-modal-btn', {url: ''});


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
mute 0
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
controls true
height null
loop false
maxheight null
maxwidth null
player_id null
portrait true
title true
width null
custom url MP4 URL
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'

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.