【GAS】YouTube埋め込みアプリの作成【IFrame Player API】

tropical-island プログラミング
2020.05.31

ブログやアプリに、YouTubeプレーヤーを埋め込むことができます。

今回は、GASで作成したアプリにYouTubeプレーヤーを埋め込んでみます。

基本となるGASファイルの作成

GASで基本となる、次の４つのファイルを作成します。こちらの記事を参考にしてください。

const doGet = () => {
  return HtmlService.createTemplateFromFile('index')
      .evaluate()
      .setTitle("YouTube埋め込みアプリ")
      .addMetaTag('viewport', 'width=device-width,initial-scale=1');
};
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

  </head>
  <body>
    <h1>YouTube埋め込みアプリ</h1>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>
<style>

</style>
<script>

</script>

IFrame Player APIとは

YouTubeプレーヤーを埋め込むために、IFrame Player APIを使います。

公式リファレンスによると次のように書かれています。

IFrame Player API を使うと、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーを制御できます。

＜中略＞

この API の JavaScript 関数を使うことで、再生する動画の頭出し、動画の再生 / 一時停止 / 停止、プレーヤーの音量の調節、再生中の動画に関する情報の取得といったことができます。また、特定のプレーヤー イベント（プレーヤーの状態の変化や動画の再生画質の変化など）に応じて実行されるイベント リスナーを追加できます。

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

IFrame Player APIを使うことで、YouTubeの動画をアプリで利用できるっていう感じですね。

YouTubeプレーヤーを作成する

公式リファレンスを参考にYouTubeプレーヤーを作成します。４つのファイルのうち「index.html」と「css.html」、「js.html」を次のように変更します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

  </head>
  <body>
    <h1>YouTubeアプリ</h1>
    <div>
      <input id="videoId" type="text" placeholder="videoIdを入力">
      <button id="play">再生</button>
    </div>
    <div class="player-container">
      <div id="player"></div>
    </div>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>
<style>
body {
  max-width: 1000px;
}

.player-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.player-container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
<script src="https://www.youtube.com/iframe_api"></script>  
<script>
"use strict";

const playButtonElement = document.getElementById("play");
  
playButtonElement.addEventListener("click", () => {
  const videoIdElement = document.getElementById("videoId");
  setYouTubeIframeAPI(videoIdElement.value);
});

let player;
  
const setYouTubeIframeAPI = (videoId) => {
  //プレーヤーが挿入されている場合は削除
  if (player) { 
    player.destroy();
  }
  player = new YT.Player("player", {
    videoId: videoId,
    events: {
      "onReady": onPlayerReady
    }
  });
};
  
const onPlayerReady = (event) => {
  event.target.playVideo();
};
</script>

Webアプリとして導入すると「検索ボックス」と「再生ボタン」が表示されるので、videoIdを入力し、再生ボタンを押すとYouTubeプレーヤーが表示されます。

youtube-iframe

videoIdは、YouTubeで動画を再生したときのURLの「？v=」の後ろの部分です。

https://www.youtube.com/watch?v=ここがvideoId

index.html

      <input id="videoId" type="text" placeholder="videoIdを入力">
      <button id="play">再生</button>

検索ボックスと再生ボタンを作っています。placeholderは、検索ボックスに初期表示する内容を指定します。

検索ボックスに初期表示することで、ユーザーが何を入力すればよいかわかりやすくなります。

css.html

YouTubeプレーヤーがレスポンシブ対応するようにしています。

レスポンシブ対応することで、画面幅に合わせて自動で大きさが変わるようになります。

js.html

<script src="https://www.youtube.com/iframe_api"></script>

IFrame Player APIを使用するために、IFrame Player API JavaScriptコードを読み込んでいます。

const playButtonElement = document.getElementById("play");
  
playButtonElement.addEventListener("click", () => {
  const videoIdElement = document.getElementById("videoId");
  setYouTubeIframeAPI(videoIdElement.value);
});

再生ボタンを押したら動作するようにするために、addEventListener()を使用しています。

ボタンを押すと、検索ボックスの値をsetYouTubeIframeAPI()に渡します。

const setYouTubeIframeAPI = (videoId) => {
  //プレーヤーが挿入されている場合は削除
  if (player) { 
    player.destroy();
  }
  player = new YT.Player("player", {
    videoId: videoId,
    events: {
      "onReady": onPlayerReady
    }
  });
};

動画プレーヤーオブジェクトを作成しています。

一番初めに、動画プレーヤーが挿入されているかを判定しています。すでに動画を再生している状態で、検索ボックスに違うvideoIdを入力して再生ボタンを押しても、動画は変わりません。

動画プレーヤーがすでに挿入されている場合は、プレーヤーを削除する必要があります。

再生する動画のvideoIdは、引数で受け取ったvideoIdになります。

動画プレーヤーのonReadyイベントが発生したら、onPlayerReady()関数を実行して動画を再生しています。

const onPlayerReady = (event) => {
  event.target.playVideo();
};

まとめ

YouTubeを再生できるWebアプリが完成しました。

IFrame Player APIには、動画を制御する様々な関数が用意されています。公式リファレンスを参考に自分だけのYouTubeプレーヤーのアプリを作ってみましょう。

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