サイトにYoutube動画を埋め込みたいときに試したい３つの実装方法

JavaScript

こんにちは！みみほくろです。

Youtubeって面白い動画が多くて時間を忘れちゃいますよね。

自分の動画もみんなに見てほしい！ってことで自分のサイトにYoutube動画を設置することもあると思います。

今回はYoutube動画をサイトに埋め込む際に使える実装方法をご紹介します。

実装方法

今回紹介する実装方法はこの3つです。

  • Youtube発行のIframeをそのまま貼り付け
  • DOM操作による埋め込み
  • Youtube Player API

Youtube発行のIframeをそのまま貼り付け

通常ではサイトにYoutube動画を埋め込むときに、公式の共有機能を使ってコード（Iframe）を出力してそれを任意の場所に貼り付けて使うのが手っ取り早くてスタンダードなやり方です。

ただWebサイトの特性上、コードは上から下へ順々に読み込まれるので、そのまま埋め込んでしまうと動画の読み込み処理が終わるまで次の処理が進まないのでサイトの表示に時間がかかってしまいます。

尺の短い動画ならそこまで気にすることはないですが、尺の長い動画となるとその分読み込み時間も増えちゃうわけで、ページの表示速度に影響が出てしまいます。

WordPressだとテーマによってはいい感じに調整してくれるものもありますが、使えるテーマが限られてくるしWordpressを使わない・使えない環境では読み込み速度の調整対策が別途必要です。

DOM操作によるIframeの埋め込み

DOM操作ってなんのこっちゃ、と思うかもしれませんが、要はHTMLが読み込まれる段階では動画を読み込まず、特定のアクションが起きたときやCSSや画像などすべて読み込んだ後に初めて動画を読み込んでHTMLに追加するテクニックです。

特定のアクションで動画を表示させる方法

こちらで紹介するのはボタンを押すと指定の要素内にYoutube動画のiframeが追加される処理コードです。

See the Pen
Untitled by mimihokuro (@mimi_hokuro)
on CodePen.

読み込んでいるYoutube動画は公式で紹介しているものを使っています。

iframe 組み込みの YouTube Player API リファレンス

<button id="createYoutubeButton">Youtube生成</button>
<div class="youtube-container"></div>
const youtubeContainer = document.querySelector(".youtube-container");
const createYoutubeButton = document.querySelector("#createYoutubeButton");
createYoutubeButton.addEventListener("click", () => {
  youtubeContainer.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?si=gVI3kyrWgL_ZrS_8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
})

上記のYoutube発行のIframeをそのまま埋め込む手順をボタンクリックしたら実行するようにしたもので、かなりシンプルな実装方法です。

Youtube Player API

Youtube Player APIは正式にはIframe Player APIと呼ばれ、Youtube動画をIframeで出力し動作やイベントなど細かな制御ができる無料のYoutube APIです。

公式リファレンスはこちら

iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API  |  Google for Developers
アプリに YouTube プレーヤーを埋め込みます。
developers.google.com

Youtube Player APIのメリット

このAPIのメリットは公式でも紹介していますが、主にこの3つがメリットになります。

  • JavaScriptによって動画を再生、停止、一時停止など動作を制御できる。
  • 再生→停止といった状態や再生速度などのイベントが発生したタイミングで任意の処理を走らせることができる。
  • 埋め込みのiframeと違って非同期処理で行われるためサイトの表示速度の改善が期待できる。

特にYoutube Player APIは非同期処理を使うことができるのでページの表示速度に悪影響を与えません。

というのも、先ほどのYoutubeの共有機能で発行したIframeをそのまま貼り付ける方法で説明したように通常ではコードは上から順々に読み込まれますが、非同期処理を使うことによって処理の終了を待たずして次の処理に移ることができます。

Youtube Player APIのデメリット

  • iframeと違ってボタン一つで出力されないため手間がかかる。
  • HTMLだけでなくJavaScriptの知識が必要なため初心者には難しい

という点でデメリットが挙げられますが、動画を一つだけ設置したいとかなら後述のコードをそのまま使うだけでできてしまうので大きなデメリットではないかなと思います。

基本的な使い方

まずは基本的な使い方としてYoutubeプレイヤーを出力してみます。

See the Pen
Create Youtube by Youtube Iframe API by mimihokuro (@mimi_hokuro)
on CodePen. 

<div id="youtubeIframe"></div>

<script>
  const tag = document.createElement("script");

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

  function onYouTubeIframeAPIReady() {
    const player = new YT.Player("youtubeIframe", {
      height: "360",
      width: "640",
      videoId: "動画ID",
    });
  }
</script>

処理の流れとしては、

  1. ソースにはAPIの呼び出し先を挿入したscriptタグを生成
  2. 生成したscriptタグをDOM上に追加
  3. onYouTubeIframeAPIReady関数によってvideoIdで指定した動画を呼び出しDOM上（id=”youtubeIframe”）に生成

といった感じです。

機能を求めないなら動画IDさえあればコピペで使えて意外と簡単です。

関数やプロパティーを使って制御する

前述しましたがYoutube Player APIのメリットは、特定の位置から再生させたり、再生が始まったら数秒後に止めたりとJavaScriptを使った制御ができるところです。

ただただ動画を読み込んで表示するだけならIframeを直接DOMに挿入する方法でもいいですが、Youtube Player APIには40以上の関数と6つのイベントに20ほどのプロパティーが用意されているので、より細かい調整を行いたい場合にうってつけです。

なので、オススメとしてはYoutube Player APIですが、ケースバイケースで使い分けてみてください。

タイトルとURLをコピーしました