Need help with modal-video?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

appleple
250 Stars 82 Forks MIT License 102 Commits 39 Opened issues

Services available

!
?

Need anything else?

Contributors list

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

shell
npm install modal-video --save

or yarn

yarn add modal-video

Short Sample

Basic

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

Vimeo

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

MP4

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

OR

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.