Skip to content

appleple/modal-video

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Takayuki NagatomiTakayuki Nagatomi
Takayuki Nagatomi
and
Takayuki Nagatomi
Jun 22, 2023
aa5464f · Jun 22, 2023
Jun 16, 2021
Jun 14, 2023
Jun 14, 2023
Jun 16, 2021
Jun 14, 2023
Aug 26, 2021
Sep 12, 2017
Jun 16, 2021
Sep 12, 2017
Jul 27, 2021
Jun 14, 2023
Feb 3, 2017
Aug 2, 2022
Jun 14, 2023
Aug 2, 2022

Repository files navigation

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?

  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.