YouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む

はじめに
- この記事の概要
- 対象読者
実装
- コード全体について解説
さいごに

はじめに

この記事の概要

こんにちは！株式会社TOKOSのエンジニアのタクヤです！
今回は YouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む方法をご紹介します！

YouTubeにアップロードされている動画をwebサイトのメインビジュアルにする際に、そのままiframeで埋め込んでしまうと動画の再生ボタンやYouTubeチャンネルのアイコンなどが表示されてしまいます。
それだとWebサイトのメインビジュアルに使うには少し心許ないですね。

そんな時のためにWebサイトのメインビジュアルように良い感じにYouTubeの動画を埋め込む方法をご紹介します！
簡単なのでぜひ使ってみてください！

対象読者

Webサイトに動画を埋め込みたい方
WebサイトのメインビジュアルにYouTubeの動画を埋め込みたい方

実装

YouTubeのIFrame Player APIを使用してYouTubeの動画を埋め込みます。

IFrame Player API とは

IFrame Player API は、YouTubeなどの動画プラットフォームが提供するAPIの一種です。具体的には、YouTubeの埋め込みプレーヤー（Embedded Player）を制御するためのAPIです。このAPIを使用することで、ウェブページ上にYouTubeの動画を埋め込み、再生、一時停止、音量調整などの操作を制御することができます。

IFrame Player APIは、通常、JavaScriptを使用して実装されます。以下は、簡単な例です。この例では、YouTubeの埋め込みプレーヤーを作成し、再生ボタンがクリックされたときに再生を開始する方法を示しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>YouTubeの動画をWebサイトのメインビジュアルに上手に埋め込む</title>
    <link rel="stylesheet" href="./reset.css" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="c-mv">
      <div class="c-mv__container">
        <h1 class="c-mv__title">Compfire By The River</h1>
      </div>
      <div id="youtube" class="c-mv__video"></div>
      <div class="c-mv__mask"></div>
    </div>
  　<script src="./index.js"></script>
  </body>
</html>

.c-mv {
  aspect-ratio: 16/9;
  height: auto;
  position: relative;
  width: 100%;
}

.c-mv__container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 40px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.c-mv__title {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.c-mv__video {
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: hidden;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

.c-mv__mask {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0;
  height: 100%;
  top: 0;
  width: 100%;
  z-index: 2;
}

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

let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player("youtube", { // youtbeの箇所はHTMLのid
    videoId: "Ftm2uv7-Ybw", // YouTubeの動画のID
    playerVars: {
      playsinline: 1, // インライン再生
      autoplay: 1, // 自動再生
      fs: 0, // 全画面表示ボタン
      rel: 0, // 関連動画
      controls: 0, // コントロール
      modestbranding: 1, // YouTubeロゴ
      iv_load_policy: 3, // 注釈
    },
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange,
    },
  });
}

// ミュートで再生
function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

// 最後まで再生した後のループ再生
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    event.target.playVideo();
  }
}

コード全体について解説

HTMLはシンプルです。

テキスト要素
YouTubeのiframeが入る要素
YouTubeのiframeをマスクする要素

<div class="c-mv">
  <div class="c-mv__container"><!-- テキスト要素 -->
    <h1 class="c-mv__title">Compfire By The River</h1>
  </div>
  <div id="youtube" class="c-mv__video"></div><!-- YouTubeのiframeが入る要素 -->
  <div class="c-mv__mask"></div><!-- YouTubeのiframeをマスクする要素 -->
</div>

CSSは画面の横幅いっぱいに要素の大きさを設定し、YouTubeの動画に合わせてアスペクト比を設定しています。
また、YouTubeのiframeの上に来るマスク要素を用意することでiframeをユーザーが直接触れられないようにしています。

.c-mv {
  /* 省略 */
  aspect-ratio: 16/9; /* Youtubeの動画のアスペクト比 */
}

.c-mv__container {
  /* 省略 */
  z-index: 1; /* テキスト要素を真ん中の層に配置 */
}

.c-mv__video {
  /* 省略 */
  z-index: 0;  /* テキスト要素を下の層に配置 */
}

.c-mv__mask {
  /* 省略 */
  z-index: 2;  /* テキスト要素を上の層に配置 */
}

参考iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API | Google for DevelopersGoogle for Developers

javascriptでは、IFrame Player APIのドキュメントをほとんどそのまま使用しています。
変えるところは、HTMLのidとYouTubeの動画のID くらいです。

ローディング画面などはお好みで付け加えてください！

function onYouTubeIframeAPIReady() {
  player = new YT.Player("youtube", { // youtbeの箇所はHTMLのid
    videoId: "Ftm2uv7-Ybw", // YouTubeの動画のID
　　// 省略
  });
}