2024.05.06
OSS
モバイルフレンドリーなイメージビューワー SmartPhoto.js の利用方法
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>
実際に利用されているサイトで、いくつかの動画をご覧になってみてください。どんな感じで使えるのかがイメージしやすいはずです。
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 の再生をするモードになります。
<button class="js-modal-video" data-video-id="ixHfw5BRaw4">Open Video</button>
<button class="js-modal-video" data-video-url="https://developer.a-blogcms.jp/themes/developer/movies/280.mp4">Open Video</button>
また、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 からダウンロードください。
もしくは、npm 、yarn を使ったインストールも可能です。
npm install modal-video --save
yarn add modal-video
React版はこちら。下記のコマンドよりインストールができます。
npm install react-modal-video
使い方は下記のサイトをご参照ください。
その他にも、https://github.com/appleple で多くのライブラリなどを公開しておりますので、合わせてご覧ください。また、弊社では有償にはなりますが、JavaScriptのライブラリ開発のお手伝いも行っておりますので、お気軽に お問い合わせフォーム からご相談ください。