【PR】を含みます。

フロントエンド

【JavaScript】youtube動画をWebサイトに読み込んで制御する方法

JavaScript youtube動画をWebサイトに読み込んで制御する方法

YouTube動画を自分のWebサイトに埋め込んで、再生・停止・音量調整など自由にコントロールしたいと考えたことはありませんか？

本記事では、「YouTube IFrame Player API」を使い、JavaScriptだけでYouTube動画をサイト内で自在に読み込み・操作する方法を分かりやすく解説します。

基本の実装方法から便利なオプション、再生イベントやメソッドの活用例まで、実用的なサンプルコードとともに詳しくご紹介します。

JavaScriptでyoutube動画を読み込む

実装コード

HTML
Copy
<div class="player_container">
  <div id="player"></div>
</div>
CSS
Copy
.player_container {
  display: flex;
  justify-content: center;
}
JavaScript
Copy
// YouTube IFrame Player APIの読み込み
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// youtubeプレーヤーの読み込み
let player;
let targetPlayer = document.getElementById('player');
function onYouTubeIframeAPIReady() {
  player = new YT.Player(targetPlayer, {
    videoId: 'VIDEO_ID', // ビデオIDを指定
  });
}

ビデオIDの確認方法

YouTubeのビデオIDはURL、共有リンク、埋め込みコードなどから確認することができます。

今回はURLから確認する方法を紹介します。

以下のようなURLの場合、v=abc123XYZ部分のabc123XYZがビデオIDになります。

URL：https://www.youtube.com/watch?v=abc123XYZ&list=xxxxxxxx&start_radio=1

YouTube IFrame Player APIの主なオプション一覧

autoplay
動画の自動再生設定
autoplay: 0（自動再生OFF）またはautoplay: 1（自動再生ON）
color
プレイヤーの動画進行状況バーの色を指定
color: 'red'（赤）または color: 'white'（白）
controls
プレイヤーのコントロールを表示するか
controls: 0（非表示）または controls: 1（表示）
disablekb
プレイヤーのキーボード操作
disablekb: 0（キーボード操作有効）または disablekb: 1（キーボード操作無効）
enablejsapi
YouTube埋め込みプレーヤーでYouTube IFrame Player APIを有効にするか
enablejsapi: 0（無効）または enablejsapi: 1（有効）
end
再生終了位置（秒単位）
end: 60
fs
フルスクリーンボタンの表示
fs: 0（非表示）または fs: 1（表示）
loop
動画のループ再生
loop: 0（無効）または loop: 1（有効）
※ループ再生を有効にする場合、playlistに同じビデオIDを指定します
playlist
再生リスト
値: カンマ区切りで複数のビデオIDを指定
playlist: 'VIDEO_ID_1,VIDEO_ID_2'
playsinline
iOSデバイスでのインライン再生
playsinline: 0（フルスクリーン）または playsinline: 1（インライン）
start
再生開始位置（秒単位）
start: 10

【サンプルコード】YouTube IFrame Player APIオプションの使用例

HTML
Copy
<div class="player_container">
  <div id="player"></div>
</div>
CSS
Copy
.player_container {
  display: flex;
  justify-content: center;
}
JavaScript
Copy
// YouTube IFrame Player APIの読み込み
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// youtubeプレーヤーの読み込み
let player;
let targetPlayer = document.getElementById('player');
function onYouTubeIframeAPIReady() {
  player = new YT.Player(targetPlayer, {
    videoId: 'VIDEO_ID_1', // ビデオIDを指定
    playerVars: {
      controls: 1, // プレイヤーのコントロール表示
      playlist: 'VIDEO_ID_1,VIDEO_ID_2', // 再生リスト
    },
  });
}

YouTube IFrame Player APIの主なイベント

onReady
プレイヤーが準備完了したときに発生
使用例: onReady: function(event) { /* コード */ }
onStateChange
プレイヤーの状態が変わったときに発生
使用例: onStateChange: function(event) { /* コード */ }
onPlaybackQualityChange
画質が変わったときに発生
使用例: onPlaybackQualityChange: function(event) { /* コード */ }
onPlaybackRateChange
再生速度が変わったときに発生
使用例: onPlaybackRateChange: function(event) { /* コード */ }
onError
エラーが発生したときに発生
使用例: onError: function(event) { /* コード */ }
onApiChange
プレイヤーAPIが変更されたときに発生
※APIの内部的な変更が発生する可能性がある場合に使用します。
使用例: onApiChange: function(event) { /* コード */ }

【サンプルコード】YouTube IFrame Player APIイベントの使用例

HTML
Copy
<div class="player_container">
  <div id="player"></div>
</div>
CSS
Copy
.player_container {
  display: flex;
  justify-content: center;
}
JavaScript
Copy
// YouTube IFrame Player APIの読み込み
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// youtubeプレーヤーの読み込み
let player;
let targetPlayer = document.getElementById('player');
function onYouTubeIframeAPIReady() {
  player = new YT.Player(targetPlayer, {
    videoId: 'VIDEO_ID', // ビデオIDを指定
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onPlaybackQualityChange': onPlaybackQualityChange,
      'onPlaybackRateChange': onPlaybackRateChange,
      'onError': onPlayerError,
      'onApiChange': onApiChange
    }
  });
  function onPlayerReady(event) {
    console.log("プレイヤーの準備が完了しました");
  }
  function onPlayerStateChange(event) {
      console.log("プレイヤーの状態が変わりました: " + event.data);
  }
  function onPlaybackQualityChange(event) {
      console.log("画質が変わりました: " + event.data);
  }
  function onPlaybackRateChange(event) {
      console.log("再生速度が変わりました: " + event.data);
  }
  function onPlayerError(event) {
      console.log("エラーが発生しました: " + event.data);
  }
  function onApiChange(event) {
      console.log("プレイヤーAPIが変更されました");
  }
}

読み込んだyoutube動画を操作するための主なメソッド

YouTube IFrame Player APIでメソッド（関数）を使用する場合、プレイヤーの準備完了後にonReadyイベントなどで実行する必要があります。

※プレイヤー読み込み前に実行すると、エラーが発生します。

player.playVideo()
動画を再生する
player.pauseVideo()
動画を一時停止する
player.stopVideo()
動画を停止する
player.seekTo(seconds, allowSeekAhead)
指定した秒数にシークする
引数:
  • seconds: シークする秒数
  • allowSeekAhead: trueの場合、バッファリングを許可
player.mute()
音声をミュートする
player.unMute()
音声のミュートを解除する
player.isMuted()
音声がミュートされているかどうかを確認する
戻り値: true（ミュートされている）、false（ミュートされていない）
player.setVolume(volume)
音量を設定する
引数:
  • volume: 設定する音量（0から100）
player.getVolume()
現在の音量を取得する
戻り値: 音量（0から100）
player.setPlaybackRate(suggestedRate)
再生速度を設定する
引数:
  • suggestedRate: 設定する再生速度
player.getPlaybackRate()
現在の再生速度を取得する
戻り値: 再生速度
player.getAvailablePlaybackRates()
利用可能な再生速度のリストを取得する
戻り値: 再生速度のリスト
player.setSize(width, height)
プレーヤーのサイズを設定する
引数:
  • width: 幅
  • height: 高さ
player.getVideoLoadedFraction()
読み込まれた動画の割合を取得する
戻り値: 読み込まれた割合（0から1）
player.getPlayerState()
プレーヤーの現在の状態を取得する
戻り値:
  • -1: 未開始
  • 0: 終了
  • 1: 再生中
  • 2: 一時停止中
  • 3: バッファリング中
  • 5: 頭出し済み（プレイヤーの準備が完了し、再生可能な状態）
player.getCurrentTime()
動画の現在の再生位置を取得する
戻り値: 再生位置（秒）
player.getDuration()
動画の全体の長さを取得する
戻り値: 長さ（秒）
player.getVideoUrl()
現在再生中の動画のURLを取得する
戻り値: 動画のURL
player.getVideoEmbedCode()
現在再生中の動画の埋め込みコードを取得する
戻り値: 埋め込みコード

【サンプルコード】YouTube IFrame Player APIメソッドの使用例

HTML
Copy
<div class="player_container">
  <div id="player"></div>
</div>
CSS
Copy
.player_container {
  display: flex;
  justify-content: center;
}
JavaScript
Copy
// YouTube IFrame Player APIの読み込み
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// youtubeプレーヤーの読み込み
let player;
let targetPlayer = document.getElementById('player');
function onYouTubeIframeAPIReady() {
  player = new YT.Player(targetPlayer, {
    videoId: 'VIDEO_ID', // ビデオIDを指定
    events: {
      'onReady': onPlayerReady,
    }
  });
  function onPlayerReady(event) {
    player.mute();
  }
}

まとめ

YouTube IFrame Player APIを活用すれば、JavaScriptだけでWebサイト上の動画を自由自在に制御できます。

今回ご紹介した基本の実装方法、各種オプション設定、イベント処理や主なメソッドの使い方などを活用することで、よりユーザー体験の高い動画コンテンツを作成することが可能です。

ぜひ本記事のサンプルコードを参考に、あなたのサイトにもYouTube動画制御機能を取り入れてみてください。

-フロントエンド
-