YouTube動画をページ背景で再生表示する方法【YouTube API】｜DAD UNION

YouTube動画をウェブページの背景として再生させる方法は、視覚的なインパクトを与える手段として非常に魅力的です。
この記事では、YouTube APIを活用して、ページ背景に動画を埋め込む方法について詳細に解説します。
HTML、CSS、JavaScriptを使って実現する具体的なコード例を紹介しますので、初心者エンジニアの方にもわかりやすい内容になっています。

Contents

準備するもの
YouTube動画をページ背景で再生表示するCSS記述
YouTube動画をページ背景で再生表示するHTML記述
YouTube APIを使ってYouTube動画をページ背景で再生表示するJavaScriptの記述
YouTube動画を背景で再生表示するデモページ
まとめ

準備するもの

このプロジェクトを始める前に以下の準備を行いましょう：

HTML、CSS、JavaScriptの基本的な知識
最新のブラウザ（Google ChromeやFirefoxなど）
インターネット接続（YouTube APIを利用するため）

では、実際の実装に移ります。

YouTube動画をページ背景で再生表示するCSS記述

まず、YouTube動画を背景に表示するためのスタイルを設定します。CSSの記述例を以下に示します。この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記述

次に、HTMLの記述例を見ていきましょう。YouTube動画を背景として表示するためのエリア（id="youtube-area"）やローディング表示エリア（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ファイルを読み込みます。
ここでは、YouTube APIを使用して背景動画を制御するためのJavaScriptコードを示します。jQueryも併用して、ローディング画面の切り替えや動画の初期設定を行います。
「～ 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>