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

OSS

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

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

デモ

まずは、iframe と Modal-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

リンク

コンテンツがスクロール可能な場合にヒントを表示する ScrollHint の設定とカスタマイズ方法 | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル

appleple

レスポンシブデザインの普及により、デバイスの画面サイズに合わせてコンテンツを動的に調整することが一般的になりました。しかし、このアプローチは、特に ＜table＞要素などの広いコンテ...

スマートフォンで写真を大きく表示させる SmartPhoto.js をリリースしました | OSS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル

appleple

スマートフォンで写真をタップすると、もともと表示されているサイズより小さく表示されるような体験をしたことはありませんか？ SmartPhoto.js では、大きく表示させることを一番に考え、写...

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

シェアする

この記事を書いた人

著者の顔写真

山本 一道

まだ世の中にインターネットが無かった時代にSIerで7年間プログラマとして働き、インターネットが一般に広まり始める頃からプロバイダに5年勤めました。その後、2002年に独立しWeb制作の仕事始めています。また、2000年に日記のCGIを世にリリースしてから20年以上 CMS を作り続けています。車が大好き！

関連記事

カテゴリー

タグクラウド

ブログ内検索

関連記事

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

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

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

お問い合わせ

資料ダウンロード

何について知りたいですか？