Modal Video

Modal Video Library

Features

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

Installation

• npm
• standalone

via npm

npm install modal-video --save

or yarn

yarn add modal-video

Short Sample

Basic

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

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

Vimeo

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

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

MP4

<button class="js-modal-btn" data-video-url="https://developer.a-blogcms.jp/themes/developer/movies/280.mp4">Open Video</button>

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

OR

<button class="js-modal-btn" data-channel="custom">Open Video</button>

new ModalVideo('.js-modal-btn', {url: 'https://developer.a-blogcms.jp/themes/developer/movies/280.mp4'});

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

FAQ

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

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