2.4.8 • Published 2 years ago
modal-video v2.4.8
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
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.
2.4.7
2 years ago
2.4.8
2 years ago
2.4.6
3 years ago
2.4.5
3 years ago
2.4.4
3 years ago
2.4.3
3 years ago
2.4.2
6 years ago
2.4.1
6 years ago
2.4.0
6 years ago
2.3.2
6 years ago
2.3.1
6 years ago
2.3.0
6 years ago
2.2.3
6 years ago
2.2.2
6 years ago
2.2.1
6 years ago
2.2.0
7 years ago
2.1.2
7 years ago
2.1.1
7 years ago
2.1.0
7 years ago
2.0.2
7 years ago
2.0.1
7 years ago
2.0.0
7 years ago