- 公開日：
JS：YouTube用モーダルの作成方法（jQuery）
ージ内で再生するには画面が小さすぎる場合など、モーダルを使った再生方法は今でも有効です。今回は、ボタン要素にYouTubeのIDを設定し、それをモーダル内で再生する方法を解説します。
HTML
ボタン要素のデータ属性data-yt-modalを使用し、srcの値にYouTubeのIDを設定します。
モーダルのテンプレートに、YouTube埋め込み用のiframeをsrcは空にして、用意しておきます。
<p class="c-btn-simple">
<a href="#c-modal" data-yt-modal='{ "src":"-FYOfNbM2cs" }'>動画モーダルサンプルボタン</a>
</p><div id="c-modal" class="c-modal">
<div class="c-modal__bg"></div>
<div class="c-modal__contents">
<button type="button" class="c-btn-close"></button>
<div class="c-modal__video">
<iframe id="modal-YouTube-player" width="854" height="480" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>CSS
レスポンシブ対応なので、モーダルの大きさ可変にしています。
.c-modal {
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
display: grid;
place-content: center;
place-items: center;
}
.c-modal__bg {
position: absolute;
background-color: #000;
opacity: 0.8;
width: 100%;
height: 100%;
transition: opacity 0.8s;
}
.c-modal .c-btn-close {
position: absolute;
width: min(4.0540540541vw,60px);
height: min(4.0540540541vw,60px);
cursor: pointer;
right: 0;
top: max(-6.25vw,-80px);
margin: 0;
padding: 0;
transition: background-color 0.3s;
}
.c-modal .c-btn-close::before,
.c-modal .c-btn-close::after {
content: "";
position: absolute;
width: min(3.3783783784vw,50px);
height: 2px;
right: 0;
background-color: #fff;
transition: transform 0.3s;
}
.c-modal .c-btn-close::before {
transform: rotate(45deg);
}
.c-modal .c-btn-close::after {
transform: rotate(-45deg);
}
.c-modal__contents {
position: relative;
z-index: 1;
height: min(39.1891891892vw,580px);
width: min(64.1891891892vw,950px);
padding: 50px;
border-radius: 20px;
background-color: #fff;
transition: all 1.4s cubic-bezier(0.1, 1.1, 0.38, 1);
}
.c-modal__main {
overflow: auto;
height: 100%;
}
.c-modal__video {
position: relative;
width: 100%;
aspect-ratio: 16/9;
}
.c-modal__video iframe {
width: 100%;
height: 100%;
}
.modal-on {
overflow: hidden;
}
.modal-on .c-modal {
opacity: 1;
pointer-events: auto;
}
.modal-on .c-modal__content {
right: 0;
opacity: 1;
pointer-events: auto;
}
.modal-on .c-modal__contentInner {
right: 0;
opacity: 1;
}
.modal-on .c-modal__bg {
opacity: 0.9;
}
@media screen and (min-width: 769px) {
.c-modal .c-btn-close:hover::before {
transform: rotate(135deg);
}
.c-modal .c-btn-close:hover::after {
transform: rotate(45deg);
}
}
@media screen and (max-width: 768px) {
.c-modal .c-btn-close {
width: 13.3333333333vw;
height: 13.3333333333vw;
top: -13.3333333333vw;
}
.c-modal .c-btn-close::before, .c-modal .c-btn-close::after {
width: 8vw;
}
.c-modal__contents {
padding: 5.3333333333vw;
width: 100%;
height: auto;
}
}JavaScript（jQuery）
モーダルを閉じる際、srcの値を空にして動画を無効化しつつ、$playerWindow.postMessageのfuncの値にstopVideoを渡し、動画を明示的に停めています。
$(function() {
let $modalbg = $('.c-modal__bg');
let $modalitems = $('[data-yt-modal]');
let $btnClose = $('.c-btn-close');
let $YTPlayer = $('#modal-YouTube-player');
$modalitems.on( 'click', function(e){
e.preventDefault();
let item = e.currentTarget;
let modalinfo = $(item).data('ytModal');
let YTsrc= 'https://www.youtube.com/embed/' + modalinfo.src + '?enablejsapi=1';
$YTPlayer.attr('src',YTsrc);
$('body').addClass('modal-on');
});
$modalbg.on( 'click', modal_close);
$btnClose.on( 'click', modal_close);
function modal_close() {
$YTPlayer.attr('src', '');
videoControl("stopVideo");
$('body').removeClass('modal-on');
}
function videoControl(action){
let $playerWindow = $YTPlayer[0].contentWindow;
$playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
}
});
執筆者
astroboy
Webデザイナー&コーダー。HTML/CSS/JavaScript/Vue.js/WebGL/ECサイトなど手広くWeb制作に従事する。現在は東京で活動中。