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
Open Video">
<button class="js-modal-btn" data-video-id="XJS_UYNq4No">Open Videobutton>
new ModalVideo('.js-modal-btn');
Vimeo
Open Vimeo">
<button class="js-modal-btn" data-video-id="202177974">Open Vimeobutton>
// import ModalVideo from 'modal-video';
new ModalVideo('.js-modal-btn', {channel: 'vimeo'});
MP4
Open Video">
<button class="js-modal-btn" data-video-url="https://developer.a-blogcms.jp/themes/developer/movies/280.mp4">Open Videobutton>
new ModalVideo('.js-modal-btn');
OR
Open Video">
<button class="js-modal-btn" data-channel="custom">Open Videobutton>
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
enablejsapiproperty to1. - Load YouTube Iframe API. Add
in HTML file.
![[FEATURE] enable YouTube's 'nocookie' feature with a new setting](https://avatars.githubusercontent.com/u/229676?v=4)
58 Jan 3, 2023
23 Nov 8, 2022
3 Aug 4, 2022
113 Dec 6, 2022
32 Aug 12, 2023
25 Jan 1, 2023
8 Dec 5, 2022
7 Oct 29, 2022
3 Oct 8, 2020
8 Jun 20, 2022
4 Nov 10, 2022
5 Oct 23, 2022
2.3k Jan 9, 2023
3 Mar 5, 2022
122 Dec 10, 2022
67 Dec 22, 2022
3 Nov 3, 2022
32 Dec 20, 2022
73 Nov 26, 2022