modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグイン(+ React版)をリリースしました



この modal-video.js は、弊社で開発している a-blog cms の中で利用するために作られた「モーダルビデオ用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。

今回 modal-video.js はアクセシビリティへの対応や、数多くのYoutubeとVimeoのAPIに対応するために作られました。

appleple.github.io/modal-video では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。

  1. 特徴
  2. 使い方
  3. デモ
  4. オプション
  5. modal-video.scss のカスタマイズ
  6. ダウンロード
  7. リンク
  8. 追伸 - React版について

 

特徴

  • 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)

ダウンロード

ダウンロードはこちらから行えます。

modal-video.js をダウンロード

リンク

appleple.github.io/modal-video


github.com/appleple/modal-video


FAQ

modal-videoを使って読み込んだYouTubeの動画をGoogle Tag Manager で計測するにはどうしたらいいの?

  1. JS API を有効化します。enablejsapiプロパティを1にします。
  2. 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



シェアする

Webにまつわる お困りごとをご相談ください。

こんなお手伝いができます

Webコンサルタントとしてのお手伝い/UIデザインのご相談/デジタルメディアの総合プロデュース/パンフレット・DMなどのDTP、ロゴ制作などのビジュアルデザイン