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'


How to track YouTube videos playing in modal-video by GA4?

  1. Enable JS API. Turn enablejsapi property to1.
  2. Load YouTube Iframe API. Add <script src=""></script> in HTML file.

React Version

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