《JavaScript》モーダルでShort動画を表示する

公開日：2025年03月04日　最終更新日：2025年3月4日

JavaScript / jQuery

buttonをクリックすると、モーダルウィンドウで縦長のShort動画を表示します。
音声はミュート（mute）です。
モーダルの背景をクリックすると非表示になります。

DEMO

わかりやすいように、別ページにDEMOを用意しました。

DEMOを確認する

HTML

<button id="modal-button" class="modal-button">モーダルを表示する</button>

<div id="modal" class="modal">
	<div class="modal-overlay">
		<div class="modal-content">
			<span class="modal-close">×</span>
			<div class="player">
				<div id="player"></div>
			</div>
		</div>
	</div>
</div>

CSS

.modal {
	background-color: rgba(68,68,68,.8);
	display: none; /* 初期非表示 */
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
.modal-overlay {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}
.modal-content {
	max-height: 100%;
	max-width: 100%;
	position: relative;
	width: calc(56.25vh - 100px); /* 動画の比率にあわせて調整 */
}
.modal-close {
	background-color: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 40px;
	line-height: 1;
	position: absolute;
	right: 0;
	top: -40px;
	z-index: 11;
}
.player {
	aspect-ratio: 9 / 16;
	height: auto;
	width: 100%;
}
.player iframe {
	border: 0;
	height: 100%;
	width: 100%;
}

JavaScript

初期ではvideoId: ”で値を空にして、クリック時にvideoIDを設定しています。

	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	var players = {}; // プレイヤーを管理するためのオブジェクト

	function onYouTubeIframeAPIReady() {
		players['player'] = new YT.Player('player', {
			height: '100%',
			width: '100%',
			videoId: '', // 初期状態では動画IDを設定しない
			events: {
				'onReady': onPlayerReady,
				'onStateChange': onPlayerStateChange
			},
			playerVars: {
				disablekb: 1,
				rel: 0,
				playsinline: 1,
				autoplay: 0
			}
		});
	}

	// プレイヤーが準備完了したときの処理
	function onPlayerReady(event) {
		event.target.mute(); // 動画をミュート
	}

	// プレイヤーの状態が変化したときに呼ばれる関数
	function onPlayerStateChange(event) {
		if (event.data == YT.PlayerState.ENDED) {
			event.target.seekTo(0, true); // 動画の初めにシーク
			event.target.playVideo(); // 動画を再生
		}
	}

	// ボタンがクリックされたときにモーダルを表示する
	document.addEventListener("DOMContentLoaded", function() {
		document.getElementById('modal-button').addEventListener('click', function() {
			// モーダル用の動画IDを設定
			players['player'].loadVideoById('LOkb_AK-B_g'); // videoID
			document.getElementById('modal').style.display = 'block';
			players['player'].playVideo(); // モーダル用の動画を再生
		});

		document.getElementById('modal').addEventListener('click', function() {
			document.getElementById('modal').style.display = 'none';
			players['player'].pauseVideo(); // モーダルを閉じたら動画を一時停止
		});
	});

Ad