<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube動画終了時にFormsリンクを表示</title>
<style>
/* プレイヤー全体のコンテナ設定 */
.video-container {
position: relative;
width: 640px;
height: 360px;
background-color: #000;
}
/* YouTubeプレイヤーのサイズ */
#player {
width: 100%;
height: 100%;
}
/* 動画終了時に重なるオーバーレイのレイアウト */
.overlay {
display: none; /* 初期状態は非表示 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* 背景を暗くする */
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
z-index: 10;
}
/* Formsへ飛ぶボタンのデザイン */
.forms-button {
display: inline-block;
margin-top: 15px;
padding: 12px 24px;
background-color: #0078d4; /* Microsoft Formsっぽい青色（Google Formsなら #724ae8 など） */
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
transition: background-color 0.3s;
}
.forms-button:hover {
background-color: #005a9e;
}
</style>
</head>
<body>
<div class="video-container">
<!-- YouTubeプレイヤーがここに埋め込まれます -->
<div id="player"></div>
<!-- 動画終了時に表示されるエリア -->
<div id="formsOverlay" class="overlay">
<h3>ご視聴ありがとうございました</h3>
<p>アンケートへのご協力をお願いいたします。</p>
<!-- 任意のForms URLに書き換えてください -->
<a href="https://forms.cloud.microsoft/Pages/DesignPageV2.aspx?prevorigin=shell&origin=NeoPortalPage&subpage=design&id=SnEPkmuVDk6HAK5Zyo4ien9hhxNj_gdIu89uaZtnpy5UN0RRTzNRUjhBVTM5NFVaRFhON0FYTEkxMi4u" target="_blank" class="forms-button">アンケートに回答する</a>
</div>
</div>
<script>
// 1. YouTube IFrame Player API のコードを非同期で読み込む
var tag = document.createElement('script');
tag.src = "https://youtube.com";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 2. APIコードがダウンロードされた後に <iframe> と YouTube プレイヤーを生成
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'z3NV52wQB-c', // 表示したいYouTubeの動画IDに書き換えてください
events: {
'onStateChange': onPlayerStateChange
}
});
}
// 3. プレイヤーの状態が変更されたときに呼び出される関数
function onPlayerStateChange(event) {
var overlay = document.getElementById('formsOverlay');
// YT.PlayerState.ENDED (値は 0) は動画再生が終了したことを示します
if (event.data == YT.PlayerState.ENDED) {
overlay.style.display = 'flex'; // オーバーレイを表示
} else {
// 再生中や一時停止中はオーバーレイを隠す（巻き戻して再生し直した場合の考慮）
overlay.style.display = 'none';
}
}
</script>
</body>
</html>
未分類