YouTube埋め込み動画で関連動画を表示させない方法と同一チャンネル内の関連動画のみ表示させる方法

2019 年 12 月 7 日

YouTubeの埋め込み用HTMLタグのiframeで指定する動画のURLは、実は各種パラメーターを設定できる(IFrame Player API)。

それを利用することで、さまざまなことに対応可能になる。

基本:URLのパラメーターとは

URLの末尾の「?」以降につくキー(名前)と値の組み合わせのこと。

キーと値は「=」でつなぎ、複数の組み合わせを同時に指定したい場合はそれらを「&」でつなぐ。

例:

https://example.com/file.php?keyname=abc&myvalue=1

IFrame Player APIのバージョン表記

IFrame Player APIにはバージョンがあるので、それも一緒に指定したほうがいい(らしい)。

例:

https://www.youtube.com/embed/mmnCjnhxXhg?version=3

現行のバージョンは「3」。

関連動画を表示させない方法:ループさせる

パラメーターに「loop=1」を指定すると、かならず動画がくり返し再生するようになるので、結果的に関連動画が表示されなくなる。

ただし、loopを使う場合、同様にplaylistも指定しなければならない。

実際に特定のプレイリストを使う必要がないなら、動画のID=VideIDを指定すればいい。

VideIDは、iframeの動画URLの「https://www.youtube.com/embed/」以降、通常のYouTubeページでは「https://www.youtube.com/watch?v=」以降の部分。

例:

<iframe id="ytframe" width="560" height="315" src="https://www.youtube.com/embed/mmnCjnhxXhg?version=3&loop=1&playlist=mmnCjnhxXhg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ  |  YouTube IFrame Player API

ShowroomにあるYouTube埋め込み動画がループするのも、このためだと思われる。

ただし、ループが嫌なユーザーもいるだろうから一長一短。

以前は埋め込みiframeのURLに「rel=0」とパラメーターをつければ非表示にできたのだが、残念ながら現在はそれをオフにすることができない。

いずれにせよ、一時停止中に表示される関連動画は消しようがない。

同一チャンネル内関連動画のみ表示させる

実は「rel=0」のパラメーターが廃止になったのではなく、動作が変更になっただけなのだが、それがここでは使える。

「rel=0」とすると、その動画と同じチャンネル内の関連動画が表示されるようになる。

例:

<iframe id="ytframe" width="560" height="315" src="https://www.youtube.com/embed/mmnCjnhxXhg?version=3&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

まとめ

YouTubeの動画は他のページへのiframeによる埋め込みに対応しているが、再生終了後にかならず関連動画のリストが表示されるようになった。

商用の場合など他の動画を表示させたくないこともよくあるので、上記の方法が活きる場面もあるだろう。

ウェブ動画関連

Posted by takasho