modal-video.js - jQuery Modal Video Plugin

Features

Demo

Japanese Document

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

Japanese Document

Basic

<button class="js-modal-btn" data-video-id="7TUOI23spt0">Open Video</button>
$(".js-modal-btn").modalVideo();

Vimeo

<button class="js-modal-btn" data-video-id="202177974">Open Vimeo</button>
$(".js-modal-btn").modalVideo({channel:'vimeo'});

Setup

<link rel="stylesheet" type="text/css" href="/path/to/modal-video.min.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/path/to/modal-video.js"></script>

Options

About YouTube options, please refer to https://developers.google.com/youtube/player_parameters?hl=en

About Vimeo options, please refer to https://developer.vimeo.com/apis/oembed

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.

react-modal-video