モーダルでビデオ再生をする
YouTube や Vimeo の組み込みビデオを、ボタンなどを押した時にモーダルで再生するための組み込みJSです。
デモ
使い方
js/config.js に設定されている「modalVideoMark」に設定されているクラス（デフォルト: js-modal-video）をクリックして再生したい要素に振ります。 次に「data-video-id」データ属性にビデオのidを指定します。
<button class="js-modal-video" data-video-id="MwlwcmF0hwo">ビデオを再生</button>
デフォルト設定
この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。
modalVideoMark: '.js-modal-video', // ここで指定したセレクターをクリックするとビデオが再生されます
modalVideoConfig: {
channel: 'youtube', // どのサービスを使うか指定します
youtube: { // youtubeの設定です。オプションはyoutubeのapiドキュメントを参照してください。
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'
},
ratio: '16:9', // ビデオの比率を指定
vimeo: { // vimeoの設定です。オプションはvimeoのapiドキュメントを参照してください。
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
},
allowFullScreen: true, // フルスクリーンの許可設定
animationSpeed: 300, // モーダルのトグルアニメーションスピード（ms）
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: 'ビデオを開きました。',
dismissBtnMessage: 'ここをクリックするとビデオを閉じます。'
}
}
