【2019年9月最新版】Youtube埋め込み時に関連動画とロゴを非表示にする方法を分かりやすく解説

2019.9.19

Web制作担当者なら誰もが地味に苦戦するやつ、Youtube埋め込み時のカスタマイズ。

企業向けサイトでよくある「関連動画表示したくない、自動再生したい、コントロールさせたくない、ロゴ表示したくない」

関連動画に関して、ひと昔前なら埋め込みタグに「rel=0」入れるだけでいけた気がするんですけどね
（2018年10月以降はできなくなったそうです）

Google様は仕様変更をサクっと行うので、Web担当者もインフラ担当者もいつも泣かされるものです。

ってわけで雑談は置いといて結論&やり方から。

まず結論

埋め込みタグのオプションでは「関連動画の非表示」はできません。

rel様が聞かなくなってるからですね。

一応、roop再生をONにすることによって関連動画が出る隙を与えないってことはできますが、動画クリックされちゃうと一時停止して関連動画が表示されるんですよね。

さっさと結論言えよって話なので、、二通り方法があります。

１．動画一つしか入れてないYoutubeアカウント作成（すみません、未検証。今はだめかも。試す価値はあり）

２．YoutubeAPIとJavascriptつかう

ってわけで、もちろんスマートにいくために２の方法を使います。

YoutubeAPIに拒否反応が出る人にもなるべく拒否反応でないように書いておきます。（僕もでます）

さっさとコピペコード出します

ますはheadタグ内最下層あたりに適当に


<script type="text/javascript">
	var youtubeVideoID = "YoutubeID張る。たとえばqUo4OKa3SQoみたいな";
</script>

と記載して、お次にいままでYoutubeタグを埋め込んでいたものを下記に置き換えます。

そいでもってその↓あたりに適当に
<script type=”text/javascript”>
var tag = document.createElement(‘script’);
tag.src = “https://www.youtube.com/iframe_api”;
var iframePlayerApiScriptTag = document.getElementsByTagName(‘script’)[0];
iframePlayerApiScriptTag.parentNode.insertBefore(tag, iframePlayerApiScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(‘iframe_player_api’, {
videoId: youtubeVideoID,
playerVars: {
‘modestbranding’: 1,
‘autohide’: 1,
‘controls’: 0,
‘showinfo’: 0,
‘rel’: 0,
‘autoplay’: 1

},
events: {
‘onReady’: onPlayerReady,
‘onStateChange’: onPlayerStateChange
}
});
}
function onPlayerReady(){
}
function onPlayerStateChange(event){

switch(event.data){
case YT.PlayerState.ENDED:
break;
case YT.PlayerState.PLAYING:
break;
case YT.PlayerState.PAUSED:
player.playVideo();
break;
case YT.PlayerState.BUFFERING:
break;
case YT.PlayerState.CUED:
break;
}
}
</script>

これを書いておきます。

何をしてるのか？ってところですが、ざっくりいうと
サイト表示したときにYoutube動画を自動再生して（仕様によりかならずmuteになります）そのままループ再生。ちなみにロゴも消す。
そして【動画が一時停止されたときに再生する】って動きになってます。

結局のところ、関連動画の非表示はできないわけです。
でも、関連動画が表示されるときは、「再生終了時か一時停止時」なので、ループ再生させて一時停止しないようにできれば解決できるわけです。

逆に、2019年9月現在はyoutubeを利用している限りはこれ以外の方法はおそらくありません。おそらく。超強引にやることはできそうだけど。
ちなみにこの方法は下記サイトを参考にやっています。というかほぼそのままなものをざっくりまとめただけです。
（一部削除と一部つけたししただけです）