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