2021.09.10
OSS
祝日や休日の要素にclassを追加する AssignHoliday をリリースしました
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグイン（+ React版）をリリースしました
この modal-video.js は、弊社で開発している a-blog cms の中で利用するために作られた「モーダルビデオ用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。
今回 modal-video.js はアクセシビリティへの対応や、数多くのYoutubeとVimeoのAPIに対応するために作られました。
appleple.github.io/modal-video では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。
特徴
- HTMLの構造に左右されない
- 綺麗なトランシジョン
- キーボードナビゲーションとスクリーンリーダーに対するアクセシビリティ対応
- Youtube API と Vimeo API 用の豊富なオプションを用意
使い方
CSS及びJavaScriptの読み込み
<link rel="stylesheet" type="text/css" href="/path/to/modal-video.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/path/to/modal-video.js"></script>基本的な使い方
<button class="js-modal-btn" data-video-id="MwlwcmF0hwo">Videoを開く</button>$(".js-modal-btn").modalVideo();Vimeoを表示
<button class="js-modal-btn-vimeo" data-video-id="336257407">Vimeoを開く</button>$(".js-modal-btn-vimeo").modalVideo({channel:'vimeo'});デモ
実際の利用事例を紹介します。
詳細ページにアクセスすることなく動画にアクセスすることができるようになります。
オプション
modal-video.js では以下のようなオプションが用意されており、Voice Overによるモーダルビデオ開閉時のメッセージや、閉じる際のメッセージも制御できます。また、YoutubeやVimeoのAPIを一通り用意しています。
詳しいYoutubeのAPIはこちらを参照してください。 https://developers.google.com/youtube/player_parameters?hl=ja
VimeoのAPIはこちらです。 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 | |
| origin | null | |
| playlist | null | |
| playsinline | null | |
| rel | 0 | |
| showinfo | 1 | |
| start | 0 | |
| wmode | 'transparent' | |
| theme | 'dark' | |
| vimeo | api | false |
| autopause | true | |
| autoplay | true | |
| byline | true | |
| callback | null | |
| color | null | |
| height | null | |
| loop | false | |
| maxheight | null | |
| maxwidth | null | |
| player_id | null | |
| portrait | true | |
| title | true | |
| width | null | |
| 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' | |
modal-video.scss のカスタマイズ
| $animation-speed | アニメーションのスピードを指定 | 標準： .03s |
|---|---|---|
| $backdrop-color | モーダルウィンドウの背景色 | 標準： rgba(0, 0, 0, .5) |
ダウンロード
ダウンロードはこちらから行えます。
リンク
appleple.github.io/modal-video
github.com/appleple/modal-video
FAQ
modal-videoを使って読み込んだYouTubeの動画をGoogle Tag Manager で計測するにはどうしたらいいの？
- JS API を有効化します。
enablejsapiプロパティを1にします。 - YouTube Iframe APIを読み込みます。
<script src="https://www.youtube.com/iframe_api"></script>をHTMLファイルに記述してください。
React版について
React版はこちら。下記のコマンドよりインストールができます。
npm install react-modal-video使い方は下記のサイトをご参照ください。
appleple.github.io/react-modal-video/
github.com/appleple/react-modal-video
