modal-video

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-video');

Vimeo

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

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

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'