動画をモーダルウィンドウで表示する JavaScript ライブラリ modal-video.js の紹介

modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTubeVimeomp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。

誰でも自由に利用いただけるように MIT license で GitHub で公開しています。

デモ

まずは、iframeModal-Video.js の違いをみてみましょう。

YouTube のサイト上から共有で iframe を埋め込みすると width="560" height="315" と書かれていますので、横幅 560px 高さ 315px のサイズで以下のように表示されます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/ixHfw5BRaw4?si=YKfBHCnm324U86jT"
  title="YouTube video player" frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen></iframe>

次に、今回紹介する modal-video.js の例です。以下の画像をクリックしてみてください。画像に再生マークが無いのでクリックできることが分かりにくいですが、今回は動作のデモという事で簡単な実装となっています。

画像サイズは自由に設定できます。

<a href="#" class="js-modal-video" data-video-id="ixHfw5BRaw4">
  <img src="https://img.youtube.com/vi/ixHfw5BRaw4/mqdefault.jpg">
</a>

実際に利用されているサイトで、いくつかの動画をご覧になってみてください。どんな感じで使えるのかがイメージしやすいはずです。



特徴


  • HTMLの構造に左右されない
  • 綺麗なトランシジョン
  • キーボードナビゲーションとスクリーンリーダーに対するアクセシビリティ対応
  • Youtube API と Vimeo API 用の豊富なオプションを用意

使い方

CSS・JavaScript を読み込みます。以下の例では CDN から読み込んでいますが、Github からダウンロードして利用してもらっても大丈夫です。

<link href="https://unpkg.com/modal-video@latest/css/modal-video.min.css" rel="stylesheet">
<script src="https://unpkg.com/modal-video@latest/js/modal-video.min.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    new modalVideo('.js-modal-video');
  });
</script>

基本的な呼び出し方

起動のための class を記述し、data-video-id を指定して再生する動画IDを指定してください。ID については http から始まらない時には YouTube などの動画ID として認識し、http から始まる際にはサーバー上の mp4 の再生をするモードになります。

YouTube

<button class="js-modal-video" data-video-id="ixHfw5BRaw4">Open Video</button>

mp4

<button class="js-modal-video" data-video-url="https://developer.a-blogcms.jp/themes/developer/movies/280.mp4">Open Video</button>

Vimeo

また、Vimeo の際には 利用のための準備 のところで、オプションを指定する事で利用が可能になります。

<script>
  window.addEventListener('DOMContentLoaded', function () {
    new modalVideo('.js-modal-vimeo', {channel: 'vimeo'});
  });
</script>
<button class="js-modal-vimeo" data-video-id="202177974">Open Vimeo</button>

オプション


modal-video.js では以下のようなオプションが用意されており、Voice Over によるモーダルビデオ開閉時のメッセージや、閉じる際のメッセージも制御できます。また、Youtube や Vimeo の API を一通り用意していますので、詳しい API の情報は以下を参照ください。



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'

カスタマイズ

以下の CSS を修正する際には、modal-video.css をダウンロードして読み込むようにしてください。

ビデオサイズの変更

モーダルウィンドウで表示されるビデオサイズは CSS 上で max-width: 960px; と設定されています。このサイズを 1280px; などに変更したら大きく表示されるようになります。

.modal-video-body {
  max-width: 960px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

背景色の変更

デフォルトの設定では #000000 の 50%透過 という事で、 background-color: rgba(0, 0, 0, 0.5); のように書かれています。この 0.5 を 0.8 にすると更に黒くなりますし、0.3 にすると薄くなります。

.modal-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000000;
  cursor: pointer;
  opacity: 1;
  animation-timing-function: ease-out;
  animation-duration: 0.3s;
  animation-name: modal-video;
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

ダウンロード

CDN を利用しない場合には、https://github.com/appleple からダウンロードください。

modal-video.js ダウンロード

もしくは、npm 、yarn を使ったインストールも可能です。

npm install modal-video --save
yarn add modal-video

React版について


React版はこちら。下記のコマンドよりインストールができます。

npm install react-modal-video

使い方は下記のサイトをご参照ください。

appleple.github.io/react-modal-video/


github.com/appleple/react-modal-video



リンク



その他にも、https://github.com/appleple で多くのライブラリなどを公開しておりますので、合わせてご覧ください。また、弊社では有償にはなりますが、JavaScriptのライブラリ開発のお手伝いも行っておりますので、お気軽に お問い合わせフォーム からご相談ください。


シェアする

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

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

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