【コピペでOK】2020年版 Youtube関連動画を非表示にするソースコード

普通に埋め込むと関連動画が出てしまう…

Youtubeの関連動画、
以前は、埋め込みタグに「rel=0」を入れるだけでしたが、
できなくなっていました。((2018年10月以降)

普通に埋め込むとこのように、
再生後と、再生停止中に、関連動画が表示されてしまいます。

一時停止中の関連動画

youtube一時停止中の関連動画

再生後の関連動画

youtube再生後の関連動画 ということで、

これを非表示にするためのコードを作ったのでご紹介します。

ちなみに、
YoutubeAPIというのを使っていますが、
まるっとコピペで動くので特に理解する必要はありません。

私も全然理解していません。

1.<head>内に下記コードを追加(ID部分のみ変更してください)

<script>
	var youtubeVideoID = "ここにIDを入れる";
</script>
※IDとは
埋め込みたい動画のリンク:https://youtu.be/IC9urbiVp4M
この「IC9urbiVp4M」の部分。(動画ごとに違います)

2.埋め込んでいたYoutubeタグを、下記とまるっと差し替えます。

<div id="iframe_player_api"></div>
<script>
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': 1,
'showinfo': 0,
'rel': 0,
'autoplay': 0
},
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.BUFFERING:
break;
case YT.PlayerState.CUED:
break;
}
}
</script>
以上で完了です。

まるっとコピペしてもらえれば、
再生後と、再生停止中の関連動画は表示されていないと思います。

ちなみに、上記コードでは、
コントロール部分に表示されるYoutubeロゴも非表示にしています。

Youtubeの仕様が変わり、
面倒になってしまいましたが、とりあえず解決できました。

参考サイト:
https://mediassort.jp/contents01/youtubeapikanrendougakesu

2つのコメントがあります。

  1. 方法が毎年変わって来ますね。
    ありがとうございます、参考になります。

    これで表示させるサイズを変えたい時は、
    どこをいじれば良いでしょう。

コメントを残す