YouTubeの埋め込みコードを使った実装方法~出そうな要件3選と共に~

YouTubeの埋め込みコードを使った実装方法~出そうな要件3選と共に~:

はじめに

最近動画コンテンツを使ったwebページ・サービスが増えていっているような気が体感的にしており、

そんな中やっぱり要件に出てきました。

「YouTubeの動画を使いたいんだよね」

実装したときに色々詰まったりしたのでそれを忘れない為のメモです。

舐めてかかったらいけない、YouTube。。。

同じことで詰まったりした時のお役に立てたらなと思ってます。

何か間違い・ご助言等ございましたらコメント・編集リクエストをいただけますと幸いです。

ではいきまっしょい！

YouTubeの動画をWebページで表示するには

手段としては2つあると思っており、

• 埋め込みコードを使用する
• YouTube APIを使用して開発する

今回は前者の「埋め込みコードを使用する」場合を想定した記事にします。

（というか埋め込みコードを使って要件と要望に沿おうとしたら自爆した）

YouTube埋め込みコードのパラメーター一覧

基本的にはこちらにまとまっています
https://developers.google.com/youtube/player_parameters#showinfo

が、上記を使用してもできなかったぁ...という場合があるので、その時に実際に行った対応方法を紹介します！(※上記の日本語のリファレンスは古い可能性が...)

初期表示の時はYouTubeのステータスバーを出したくない

��「初期表示のときにサムネの文言とYouTubeのタイトルが被ってしまうからYouTubeのタイトルを非表示にすることはできない？」

YouTubeの動画を埋め込むと、初期表示で

• 動画タイトル
• 動画で設定されているサムネイル
• ステータスバー

が表示されます。埋め込みコードでは確かにステータスバーを非表示にはできますが、、、これだけでは難しいです。

そこで、

• サムネ画像を最前面に表示
• クリックしたらサムネの画像を消して動画を差し込む

と実装しました。

実際のコードはこちら。

<div class="hoge_container"> 
  <div id="hoge_substituteMovie" class="hoge_image"> 
    <img class="movieFront_image" src="https://www.pakutaso.com/shared/img/thumb/150829292440_TP_V.jpg" 
      alt="" width="960" height="600"> 
  </div><!-- /#hoge_substituteMovie --> 
</div><!-- /#hoge_container --> 

.hoge_container { 
  position: relative; 
  overflow: hidden; 
  height: 0; 
  padding-bottom: 56.25%; 
} 
#hoge_substituteMovie { 
  position: relative; 
  z-index: 0; 
  display: inline-block; 
} 
#hoge_movie { 
  position: absolute; 
  z-index: -1; 
  top: 0; 
} 
#hoge_movie.-showFront { 
  position: static; 
} 
.-invisible { 
  opacity: 0; 
  z-index: -2; 
} 
.-invisible img { 
  display: none; 
} 
.movieFront_image { 
  cursor: pointer; 
} 

function startHogeMovie() { 
  var videoTrigger = document.getElementById("hoge_substituteMovie"); 
  var video = document.getElementById("hoge_movie"); 
    if (!videoTrigger) { 
      return; 
    } 
    videoTrigger.onclick = function () { 
      videoTrigger.innerHTML = '<iframe width="960" height="600" src="https://www.youtube.com/embed/notr_WQXO2k?controls=1&showinfo=0&autoplay=1&mute=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'; 
   }; 
} 
startHogeMovie(); 

point

• innerHTMLで画像の記述があるところを動画の記述に書き換えるで解決

関連動画を非表示にしたい

��「YouTubeを見終わったときに出てくる関連動画、出したくないんだよねぇ...」

こちら、これまではrel=0を埋め込みコードに記述すればよかったのですが、2018年9月25日にYouTube側で仕様変更があり、関連動画の非表示はできなくなったようです。
https://teratail.com/questions/154926

こりゃ困った。。。。。。

そこでパワープレイで、以下を実施しました。

• ループ再生
• ループする動画は指定している動画と同じ動画にする

コード例

https://www.youtube.com/embed/notr_WQXO2k?controls=1&showinfo=0&autoplay=0&mute=1&rel=0&loop=1&playlist=notr_WQXO2k 

loop=1&playlist=notr_WQXO2kここの部分！！

• 
  loop=1：ループ再生をオン
• 
  playlist={動画ID}：再生後に再生させる動画を指定

これで関連動画は出なくなります。

、、、が。

動画を見終わったときに動画が止まりません。そう、ループですからね。

これ以上は、もうAPI使って独自開発をするか、もう自分のサーバーに動画をアップロードして

独自で開発するしかないと思います、、、もし何か手段がありましたらご教授いただけますと幸いです......！

point

• YouTubeの埋め込みコードの仕様に変更があって関連動画非表示のrel=0は使用できなくなった
• 埋め込みコードを使ってどうしても関連動画を非表示にしたい際は、loop=1&playlist={使用している動画のID}で永遠と同じ動画が再生されるようにする
• それが嫌だったらAPI使って独自で開発するしかない(と思う、多分。)

動画の周りに余白を入れたい

��「他のコンテンツの幅と差異をつけるために、左右に余白を入れて欲しいんだ〜」

私は余白を入れるだけだ〜わーい！と思い、何も考えずに余白を入れて確認出しをしました。(恥)

すると

��「あれ、さっきまでなかった黒い枠が出てきてるんだけど。。。」

この"黒い枠"の正体は、左右に余白を入れたことによるアスペクト比が崩れでした。

余白は計算してくれないよね、そうだよね〜〜〜と思ってアスペクト比を計算し直してスタイルを書き換えないといけなくなりました。

すぐにぽいっとできるものではなく、アスペクト比の計算も入ってくるので工数がその分かかってしまいました。

point

• 埋め込み動画に対して余白を入れる場合はアスペクト比を再計算しないといけないので、秒で対応は難しい
• 動画に余白を持たせる等の要件があった際は先に上記のリスクを伝えておくとよさそう

おわりに

YouTube動画の埋め込みコードを使ったら簡単に動画を埋め込めるぞ〜〜！

って舐めてかかったら痛い目にあった話でした。

YouTubeの仕様はいつどこで変化が起きるか分からないので、「あの時はできたから今回もできるっしょ！」と思ったら

仕様変更のため思わぬところでハマることがあります。

なので、要件が降ってきた際にはYouTubeの仕様を調査してから「できる・できない」を判断しましょう。

思わぬ工数が重なってしまいます(大号泣)

YouTube動画を使用する際は実際の要望をきちんとヒアリングして埋め込みコードのみで十分なのか、それともAPIを使用して作らないといけないのかを適切に判断して素敵なYouTubeライフを！！！！！