YouTube APIを使ってYouTube動画をページ背景で再生表示する方法をご紹介します。
Contents
YouTube動画をページ背景で再生表示するCSS記述
※背景にYouTube動画を表示するエリア(#youtube-area)、Loading表示エリア(#loading)、ヘッダーエリア(#header)背景にローディング画像(loading.jpg)を設定 等のCSS記述です。必要に応じて変更して下さい。
<style> * { padding: 0; margin: 0; } body { font-size: 14px; text-align: center; line-height: 2em; } #header{ position: relative; height: 100vh; text-align: center; color: #fff; background: url("loading.jpg") no-repeat; background-size: cover; } #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 30px; } #loading.disappear{ display: none; } /* YouTube表示エリア */ #youtube-area{ position: absolute; z-index: 1; top: 0; right:0; left:0; bottom:0; overflow: hidden; opacity: 0; } #youtube-area.appear { animation-name:pageanimetuika; animation-duration:.6s; animation-fill-mode:forwards; } @keyframes pageanimetuika{ 0% { opacity: 0; } 100% { opacity: 1; } } #youtube { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 178vh; height: 56vw; min-height: 100%; min-width: 100%; } /*YouTubeクリック防止マスクエリア*/ #youtube-mask{ position: absolute; z-index: 2; top:0; width:100%; height: 100%; } h1{ position:absolute; z-index: 2; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); color:#000; text-align: center; font-size: 30px; } .honbun{ font-size: 30px; padding: 100px 0; } </style>
YouTube動画をページ背景で再生表示するHTML記述
※背景にYouTube動画を表示するエリア(id=”youtube-area”)、Loading表示エリア(id=”loading”)を用意します。必要に応じて変更して下さい。
<header id="header"> <div id="loading">Loading…</div> <div id="youtube-area"> <h1>Youtube動画を背景で再生してます</h1> <div id="youtube"></div><!--YouTube表示エリア--> <div id="youtube-mask"></div><!--YouTubeクリック防止マスクエリア--> </div> </header> <div class="honbun"> ココ以降にコンテンツ内容を入れます。 </div>
YouTube APIを使ってYouTube動画をページ背景で再生表示するJavaScriptの記述
※jquery-3.4.1.min.jsファイルを読み込みます。「~ YT.Player(‘YouTube動画を表示させたいタグID’,{オプション}) ~」を記述します。オプションではYouTube動画を再生するための自動再生、プレイヤーボタンの表示等のYouTube APIの設定を行います。
<script src="jquery-3.4.1.min.js"></script> <script> //ローディング画面 $(window).on('load',function(){ $("#youtube-area").addClass('appear'); $("#loading").addClass('disappear'); }); //YouTube API 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 ytPlayer; function onYouTubeIframeAPIReady() { ytPlayer = new YT.Player('youtube', {//動画を表示させたいタグID指定 videoId: 'P7Od94ikeoI',//動画のアドレスの指定 playerVars: { playsinline: 1,// インライン再生を行う autoplay:1,//自動再生を行う fs:0,//全画面表示ボタンを表示しない rel: 0,// 再生中の動画と同じチャンネルの関連動画を表示 controls: 0,// プレーヤー コントロールを表示しない modestbranding: 1, // YouTubeロゴの非表示 iv_load_policy: 3, // アノテーションの非表示 start:30, }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } //ミュートにして再生 function onPlayerReady(event) { event.target.mute(); event.target.playVideo(); } //YouTubeループ設定 function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) { event.target.playVideo(); } } </script>
YouTube動画を背景で再生表示するデモページ
YouTube動画を背景で再生表示するデモページ
※初めの数秒は左上に動画のタイトルと右下にYouTubeロゴが表示されます。これも非表示にしたいですが方法が見つかりませんでした。
※iPhone Safariだと自動再生されないですよね。iOSやSafariの仕様がそうなのか自動再生する方法があればまたご紹介します。
ソース元:YouTubeを使って、画面全体に背景動画を流す
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告