Home
JavaScript
【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

どうも!かけちまるです!

YouTubeやVimeoのモーダル表示をjQueryプラグインのmodal-video.jsで手軽に実装する方法を解説します。

自力で実装しようとすると再生や停止の管理など意外に気にする点が多いのでプラグインで実装してしまいましょう。

実装サンプル

この記事では、

  • ・基本的な使い方
  • ・オプションについて
  • ・その他の機能
  • ・モーダル表示されない場合の対処法

がわかります。

modal-video.jsの実装手順

この記事ではjQueryで実装することを前提に進めます。

実装自体は簡単で次の手順で進めます。

  • ②jQuery、jquery-modal-video.min.js、modal-video.min.cssを読み込む
  • ③htmlでモーダルボタンの設定
  • ④jQueryを記述

この記事では、次のディレクトリ構成を想定して解説します。

ディレクトリ構成
開く&閉じるコピー
index.html js/ -main.js
1

jQuery、jquery-modal-video.min.js、modal-video.min.cssを読み込む

HTMLのheadダグ内に次のコードを記述し、jQuery、jquery-modal-video.min.js、modal-video.min.cssを読み込みます。

index.html
開く&閉じるコピー
<!-- headタグ内に追加 --> <link rel="stylesheet" type="text/css" href="https://unpkg.com/modal-video@2.4.8/css/modal-video.min.css"> <script src="https://unpkg.com/jquery@3.6.1/dist/jquery.min.js"></script> <script src="https://unpkg.com/modal-video@2.4.8/js/jquery-modal-video.min.js"></script>
2

htmlでモーダルボタンの設定

適当にボタンを用意してください。
そのボタンにdata-video-id属性をつけYouTubeかVimeoのビデオIDを設定します。

index.html
開く&閉じるコピー
<div class="btn" data-video-id="743497945">Vimeo</div>

ビデオIDはURLから取得できます。

YouTubeの場合

YouTubeのビデオID

Vimeoの場合

VimeoのビデオID
3

jQueryを記述

YouTubeの場合は、

main.js
開く&閉じるコピー
$(()=> { $('.btn').modalVideo({channel: 'youtube'}); });

Vimeoの場合は、

main.js
開く&閉じるコピー
$(()=> { $('.btn').modalVideo({channel: 'vimeo'}); });

実装サンプル

modal-video.jsのオプションについて

modal-video.jsでは、YouTubeとVimeoそれぞれにアスペクト比や自動再生などのオプションを指定できます。

YouTubeのオプション説明はYouTube公式を参考にしてください。
Vimeoのオプション説明はVimeo公式を参考にしてください。
※Vimeoの場合は有料アカウント動画(埋め込み者が有料アカウントでなくても良い)のみ有効なオプションもあります。
※この記事では、Vimeoオプションは無料アカウント動画のみ有効なオプションを記載しています。

オプション一覧

properties default
channel ‘youtube’
youtube autoplay 1
mute 0
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
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
muted 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’

オプションの記述方法

例えば、自動再生に設定したい場合は次のようにします。

実装サンプル

YouTube
Vimeo
JavaScript
開く&閉じるコピー
//YouTubeの場合 $('.btn').modalVideo({ channel: 'youtube', youtube: { autoplay: 1, mute: 1, } }); //Vimeoの場合 $('.btn').modalVideo({ channel: 'vimeo', vimeo: { autoplay: true, muted: true } });

他機能の解説

modal-video.jsでは、もう少しできることがあります。

.mp4のモーダル表示

実装サンプル

HTML
開く&閉じるコピー
<a class="btn" href="">MP4</a>
JavaScript
開く&閉じるコピー
$('.btn').modalVideo({ channel: 'custom', url: 'https://kakechimaru.com/wp-content/themes/kakechimaru/video/210504_01.mp4 ' // 相対パスでもOK });

FacebookWatchのモーダル表示

実装サンプル

HTML
開く&閉じるコピー
<a class="btn" href="" data-video-id="1109690746565174">Facebook</a>
JavaScript
開く&閉じるコピー
$('.btn').modalVideo({ channel: 'facebook' });

モーダル表示が複数ある場合

モーダルボタンにdata-channel属性をつけることでchannelを指定できます。

実装サンプル

HTML
開く&閉じるコピー
<a class="btn" href="" data-video-id="HvtCAy0lC7Q" data-channel="youtube">YouTube</a> <div class="btn" data-video-id="743497945" data-channel="vimeo">Vimeo</div>
JavaScript
開く&閉じるコピー
$('.btn').modalVideo({ youtube: { autoplay: 1, mute: 1, }, vimeo: { autoplay: true, muted: true } });

モーダル表示されない場合のチェックポイント

CSSを読み込んでいますか?

modal-video.jsにはCSS(modal-video.min.css)も用意されています。
このmodal-video.cssの読み込みを忘れがちです。

うまくいかない場合は、modal-video.min.cssを読み込めているか確認しましょう。

HTML
開く&閉じるコピー
<link rel="stylesheet" type="text/css" href="https://unpkg.com/modal-video@2.4.8/css/modal-video.min.css"> <script src="https://unpkg.com/jquery@3.6.1/dist/jquery.min.js"></script> <script src="https://unpkg.com/modal-video@2.4.8/js/jquery-modal-video.min.js"></script>

jQuery版のファイルを使っていますか?

modal-video.jsをjQueryで実装する場合は、jpuery-modal-video.jsの方を読み込む必要があります。

HTML
開く&閉じるコピー
<!-- <script src="https://unpkg.com/modal-video@2.4.8/js/modal-video.min.js"></script> --> <script src="https://unpkg.com/modal-video@2.4.8/js/jquery-modal-video.min.js"></script>

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。
Xserver

関連記事

【基本】Local by FlywheelでWordPressをローカルに構築する

【基本】Local by FlywheelでWordPressをローカルに構築する

【CSSのみ】指定行数を超えたテキストを非表示にする方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

【Three.js】カメラの距離を調節してWebGL座標をwindow座標(px)に合わせる

Visual Studio Codeの検索と置換

Visual Studio Codeの検索と置換

translateを使わずにpositionで要素を中央寄せにする方法

translateを使わずにpositionで要素を中央寄せにする方法

CSSでサイトのスクロールを無効にする方法

CSSでサイトのスクロールを無効にする方法