Youtube動画を埋め込む方法｜iframeとIFrame Player API

Update:

ベーシック編: iframeタグで動画を埋め込む

まずはベーシックな埋め込み方法です。基本的にはこちらのやり方で対応できると思います。

ここでは私がProcreateの勉強で後で見ようと思ってるチュートリアル動画で試していきましょう。
シェアしたいYoutube動画のページにアクセスし、動画の下のタブから「共有」をクリックします。

共有ダイアログが開くので、「埋め込む」をクリックします。
（ただ動画のリンクが欲しい場合は下のURLをコピー、各種SNSでシェアしたい場合は該当SNSアイコンをクリックします）

動画の埋め込みダイアログに切り替わります。コードが表示されるので、それをコピーしてHPやブログ等に配置します。

設定・調整

開始位置

埋め込みコードの下に「開始位置」のチェックボックスがあります。動画の開始位置を設定した場合、ここにチェックを入れて開始位置の時間（秒）を指定します。自動で動画URLの末尾にパラメーターが付加されるので、そのコードをコピーして貼り付けます。

埋め込みオプション

動画の埋め込みダイアログの右スクロールバーを下へ移動すると埋め込みオプションが現れます。
「プレーヤーのコントロール バーを表示する。」は基本的にチェックしておきます。ユーザービリティの兼ね合いもありますからね。しかし、MVの背後に動画を流したい（ユーザーに制御させたくない）場合はチェックを外します。
「プライバシー強化モードを有効にする。」Youtube側にユーザーが動画を再生するまでCookieを利用して情報を得たり追跡したりさせないようにする設定です。
強化モードにすると、動画URLがhttps://www.youtube.comからhttps://www.youtube-nocookie.comになります。

サイズについて

デフォルトで埋め込みコードの中にwidth="560" height="315"が記述されています。
が、レスポンシブでの幅可変を考えると、width、heightの指定を消し、親要素で囲んで擬似要素でアスペクト比を保つ方がスマートでしょう。（以下の記事参照）
また、Bootstrapを活用した埋め込み方も下記記事に記載しています。

各ブラウザ対応！アスペクト比を保ったまま要素を幅可変に対応させる方法
レスポンシブ対応、もっと言えば各ブラウザ・ブラウザ幅でも表示崩れを起こさないのが常識とされるようになったコーディング作業。各要素も当然アスペクト比を保って縦横比を崩さず表示させたい！うろ覚えのまま毎回調べてるから、記事としてアウトプットすることでちゃんと理解しようと思います。2020.06.05. Bootstrapでの場合も追記しました。2020.12.01. Google MAPをアスペクト比を保って配置する場合も追記しました。1: imgタグで画像ベタ貼り編これは簡単というかそのままなんですけど、基本 is 大事。img { width: 100%; hei...

縦横のサイズをキチッと指定したい場合は、16:9のアスペクト比を保ったままwidth、heightの数値を調整することになります。この場合、下記サイトの一覧表が便利です。
16:9一覧表

iframeタグ内の各種パタメーター

frameborder frameborder=”0″ 埋め込む動画の周りに線を付けない
frameborder=”1″ 埋め込む動画の周りに線を付ける
デフォルトで0ですが、線を付けることはほぼ無いですね。まぁ好みですが。
allowfullscreen この記述があるとユーザーが「全画面表示」で動画を見ることが可能になります。コントロールバーの一番右の四角い枠アイコンですね。
iframeタグ内のこのallowfullscreenを消してしまうと、全画面表示することができなくなります。
allow属性 allow内の記述になります。この箇所の記述はYoutubeも年単位で変えてきたりするので、意図があって変えるのでなければデフォルトのままでいいでしょう。
autoplay allow属性の中で一番触ることになるのはこの設定かと思います。autoplayとは読んで字のごとく自動再生です。この指定があるとページが読み込まれたタイミングで動画が再生されます。例えばページの下の方に動画を配置した場合は、ユーザーがまだページ上部にいて動画の位置まで来てなくても再生されることになります。音声入り動画で自動再生するとユーザーはビックリしてしまうので要注意です（状況によっては音が出てほしくない場合もありますよね）。

埋め込み結果

iframeで配置したYoutube動画

コード

Youtube動画のアスペクト比16:9を保ったまま幅可変を指定するように、親要素、親要素の疑似要素、iframeをCSSで調整しています。

<div class="iframe_wrapper">
  <iframe src="https://www.youtube.com/embed/38rnfueyY8o" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
div.iframe_wrapper {
  position: relative;
  width: 100%; /* ここは適時編集してください（px指定してmin-widthと組み合わせるなり） */
}
div.iframe_wrapper::before {
  content:'';
  display: block;
  padding-top: 56.25%; /* 高さ÷横幅×100 */
}
div.iframe_wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

上級編: IFrame Player APIで動画を埋め込む

昔からの埋め込み方です。背景として埋め込みたい、ミュートにしたいなど細かい制御を行う場合にまだまだ現役です。
以前はYouTube Player APIと呼ばれていたんですが、Google本家がIFrame Player APIと呼んでいますので、このブログもそれに合わせます。
せっかくわざわざIFrame Player APIを使って動画を埋め込むので、ミュートでの実装を目指しましょう。

参考サイト

IFrame Player APIの解説をしているサイトは数あれど、実装してみて実際に動いてくれるのは意外とありませんでした。この記事ではcly7796.netさんのJavaScriptを参照して実装しました。ありがとうございます！

YouTubeプレーヤーAPIでYouTubeを複数設置する
YouTubeプレーヤーAPIを使ってYouTubeを複数設置してみます。 埋め込みはすぐできたのですが、onPlaye...

コード

HTML

こちらはHTML上ではiframeで配置せず、該当箇所にdiv#player-01を置いています。親要素のclassおよびCSSは前述の例のママです。
実装例を後述しますが、「検証」でソースを見てみてください。div#player-01がiframeに置き換わることになります。

<div class="iframe_wrapper">
  <div id="player-01"></div>
</div>
div.iframe_wrapper {
  position: relative;
  width: 100%; /* ここは適時編集してください（px指定してmin-widthと組み合わせるなり） */
}
div.iframe_wrapper::before {
  content:'';
  display: block;
  padding-top: 56.25%; /* 高さ÷横幅×100 */
}
div.iframe_wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

JavaScript

HTMLで配置したdiv#player-01にYoutube動画が表示されるようJavaScriptで指定します。

<script>
// YouTubeのiframe 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 = [];
// 各動画情報
var ytData = [
  {
    id: 'O3XYw_6D3Q8', //youtubeのID
    area: 'player-01', //youtubeを表示する場所
  }
];
									
// 各プレーヤーの埋め込み
function onYouTubeIframeAPIReady() {
  for(var i = 0; i < ytData.length; i++) {
    ytPlayer[i] = new YT.Player(ytData[i]['area'], {
      videoId: ytData[i]['id'],
      playerVars: {
        rel: 0
      },
      events: {
        'onReady': onPlayerReady
      }
    });
  }
}

// 各プレーヤー準備完了後の処理
function onPlayerReady(e) {
  for (var i = 0; i < ytData.length; i++) {
    if(e.target.getIframe().id == ytData[i]['area']) {
      console.log(ytData[i]['area'] + 'のプレーヤー準備完了しました。');
    }
  };
}
function onPlayerReady(event) {
  event.target.mute();
}

</script>

APIで配置したYoutube動画

event.target.mute();の記述をしたことで、ミュートで再生開始されましたね。この指定はスマホでもミュートになるのですが、逆にスマホでミュート解除ができません。
似た記述でevent.target.setVolume(0)でボリューム設定をする方法もありますが、こちらはスマホでは音量の設定ができず音が流れてしまいます。
動画を貼る意図によって使い分けする必要がありますね。

複数の動画を埋め込む

複数の動画をAPIで埋め込みたい場合は、ytDataに動画情報を追記していきます。

例
// 各動画情報
var ytData = [
  {
    id: 'O3XYw_6D3Q8', //youtubeのID
    area: 'player-01', //youtubeを表示する場所
  },
  {
    id: 'opktfwIcWbQ', //youtubeのID
    area: 'player-02', //youtubeを表示する場所
  },
];

JSのplayerVarsの箇所で、コントローラーの表示非表示、自動再生のオンオフ、ループ有る無しといったパラメータの指定ができますが、この記事では掘り下げません。どのパラメータがいつまで使えるか正直分からないため、下記本家のサイトをご参照ください。

YouTube Embedded Players and Player Parameters

ただ配置するんじゃなくて背景に埋め込みたい場合

jQueryプラグイン「jquery.mb.YTPlayer」を使うと調整も効いて便利です。下記記事にまとめましたのでご参照ください。

jQueryプラグイン「jquery.mb.YTPlayer」を使ってYoutube動画を背景に埋め込む
WEB制作でMVをリッチにキメたいときなど、「Youtube動画を埋め込んで」とURLをぽんと貰うことがよくあります。Youtube側の仕様もよく変更になることもあり、iframeで埋め込むとロゴが消えない、タイトルが消えない、モバイル端末で自動再生されない……など、まぁ工数ばかり食ってしまうことに。結局、jQueryプラグイン「jquery.mb.YTPlayer」を使って実装したのでその時のメモです。公式サイトGitHub設置と設定ダウンロード&格納上記GitHub、/dist/配下からjquery.mb.YTPlayer.jsあるいはjquery.mb.YTPlayer.min.jsをゲットしてくだ...

関連記事: