modal-video.js - jQuery Modal Video Plugin



Japanese Document

If you are Japanese, you may want to read the following article instead.

Japanese Document


<button class="js-modal-btn" data-video-id="7TUOI23spt0">Open Video</button>


<button class="js-modal-btn" data-video-id="202177974">Open Vimeo</button>


<link rel="stylesheet" type="text/css" href="/path/to/modal-video.min.css">
<script src=""></script>
<script src="/path/to/modal-video.js"></script>


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'
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'

React Version

If you prefer react version of the modal video, you may also want to read this article.