modal-video.js - jQuery Modal Video Plugin

Features

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

Demo

Japanese Document

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

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'
aria	dismissBtnMessage	'Close the modal by clicking here'

FAQ

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

Enable JS API. Turn enablejsapi property to1.
Load YouTube Iframe API. Add <script src="https://www.youtube.com/iframe_api"></script> in HTML file.

React Version

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

react-modal-video