モーダルは、そのウィンドウに集中することができるメリットとデメリットを併せ持つUIで、限られた強制力が強くユーザーにストレスを与える可能性がありつつも、便利なUIです。
モーダルの基本的な使い方とデザイン
いざ実装しようと思う場合、HTMLとCSSのみで実装することも可能ですが、jQueryを使うことで、誰でも簡単に早く実装することができます。
今回は、jQueryライブラリmodal-videoのコピペでできるYouTubeやvimeoの動画モーダルについてご紹介します。
modal-video.jsとは？
modal-video.jsは、ボタンなどをクリックすることで、YouTubeやvimeoの動画モーダルで表示させるjQueryのプラグインです。
簡単に実装でき、以下のようなモーダルを表示させることができます。
モーダルで表示できる便利なプラグインはjBoxなど色々ありますが、固有のパラメーターを付与しながらレスポンシブにも対応しているプラグインは多くなく、何より簡単に実装できることが、このmodal-video.jsの最大の利点です。
また国産の為、わからないことは日本語で調べて実装することができることも最大のメリットです。
modal-video.jsの実装手順
modal-video.jsは、主に3つのステップで設置することができます。
modal-video.jsに必要なファイルは3種あります。全てのファイルはCDNで用意されているので、以下をHTMLの
<head>〜〜</head><!-- CDN CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/modal-video@2.4.2/css/modal-video.min.css" />
<!-- CDN jQuery -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/modal-video@2.4.2/js/jquery-modal-video.min.js"></script>CDNではなく、自分のサイトから読み込ませたい場合はGitHubにもあるので、ダウンロードして使用しましょう。
モーダルのトリガーになるボタンなどを、表示させたい場所にHTMLで記述します。
いろんなパターンで記述することができるので、必要に応じて仕様を選びましょう。
<!-- aタグで設置 -->
<a href="javascript:void(0);" data-video-id="XXXXXXXX" class="js-modal-video">ポップアップ01</a>
<!-- aタグ以外で設置 -->
<div data-video-id="XXXXXXXXXX" class="js-modal-video">ポップアップ01</div>
<!-- 画像のみ -->
<img src="画像URL" data-video-id="XXXXXXXX" class="js-modal-video" alt="">CSSのdrawer.min.cssは必須ではありませんが、drawer.jsとiscroll.jsは必ず記述するようにしましょう。
bodyのクロージングタグの直前にJavaScriptを記述します。
記述するJavaScriptは、YouTubeとvimeoの表示させる動画によって異なるので、必要な方か、もしくは両方書き込むようにしましょう。
(function () {
if ($(".js-modal-video").length) { //クラス名js-modal-videoがあれば以下を実行
$(".js-modal-video").modalVideo({
channel: "youtube",
youtube: {
rel: 0, //関連動画の指定
autoplay: 0, //自動再生の指定
},
});
}
})();$(".js-modal-btn-vimeo").modalVideo({channel:'vimeo'});YouTubeで指定できるパラメーターはこちらを参照して記述しましょう。
実装サンプル
YouTubeの再生ボタンのモーダル
YouTubeを再生させる場合は、aタグのclassに js-modal-video を付けて、YouTube用のjQueryを記述すれば完了で、ボタンをクリックするとモーダルでプレイヤーが表示されます。
ボタンのデザインは、WordPressテーマのsangoで使えるボタンを使用し、fontawesomeでYouTubeのアイコンを表示させています。
コードを表示する
<a href="javascript:void(0);" data-video-id="QdmVFlmbIy8" class="js-modal-video">ここにボタンの記述</a>(function () {
if ($(".js-modal-video").length) { //クラス名js-modal-videoがあれば以下を実行
$(".js-modal-video").modalVideo({
channel: "youtube",
youtube: {
rel: 0, //関連動画の指定
autoplay: 0, //自動再生の指定
},
});
}
})();
vimeoの再生ボタンのモーダル
vimeoを再生させる場合は、aタグのclassに js-modal-btn-vimeo を付け、vimeo用のjQueryを記述すれば完了です。
再生動画はYouTubeの時と同様、aタグのidに https://vimeo.com/ 以降に表示されている数字を記述することで指定することができます。
コードを表示する
<a href="javascript:void(0);" data-video-id="65843743" class="js-modal-btn-vimeo">ここにボタンの記述</a>$(".js-modal-btn-vimeo").modalVideo({channel:'vimeo'});imgタグで直接モーダル表示
a タグで括った箇所をリンク要素としてモーダル表示させることができますが、画像のimg タグにidを記述することで、リンク要素としてモーダル表示させることができます。
以下はYouTubeを表示させるモーダルですが、カーソル認識されないのでCSSで cursor: pointer を付与するなどして、クリックできることは明示した方が良さそうです。
コードを表示する
<img src="画像URL" data-video-id="QdmVFlmbIy8" class="js-modal-video" alt="画像のalt">(function () {
if ($(".js-modal-video").length) { //クラス名js-modal-videoがあれば以下を実行
$(".js-modal-video").modalVideo({
channel: "youtube",
youtube: {
rel: 0, //関連動画の指定
autoplay: 0, //自動再生の指定
},
});
}
})();
参考サイト
参考modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしましたappleple
