HTML/CSS

YouTubeの関連動画を非表示にする方法

埋め込んだYouTube動画デフォルト設定のままだと再生が終了した時に関連動画が表示されるようになっています。

こちらの記事では、埋め込んだYouTube動画の再生が終了した時に表示される関連動画を非表示にする方法について分かりやすくまとめています。

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

Youtube動画を埋め込む方法

Youtube動画を埋め込む方法は以下の別ページで詳しく解説しているので、Youtube動画の埋め込み方法が分からない人は参考にしてください。

Youtube動画の関連非表示する2つの方法

URLの最後に「?rel=0」を追加する

Youtube動画のiframe情報を取得してURLの最後に?rel=0を付けることで関連動画を非表示にすることができます。と書かれている記事が掲載されていますが、この方法では関連動画を非表示にすることができません。

厳密には昔は?rel=0を付けることで関連動画を非表示にすることができましたが、2018年から仕様が変わり他のアカウントでアップした動画のみ非表示になります。つまり、同じアカウントでアップしている動画は関連動画として表示がされてしまいます。
https://www.youtube.com/embed/xBLIzweHYic?rel=0

動画をループ再生させる

現状Youtube動画の関連非表示にする唯一の方法は動画をループさせる方法になります。
Youtube動画をループ再生する方法は、?rel=0と同様にURLの最後に「?loop=1&playlist=youtubeID」を付けることで実現することができます。

youtubeIDはURLの最後にある文字列のことで、以下のサンプルコードではyoutubeIDが「xBLIzweHYic」になります。

https://www.youtube.com/embed/xBLIzweHYic?loop=1&playlist=xBLIzweHYic

まとめ

今回はYouTubeの関連動画を非表示にする方法について解説しました。

重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。

復習ポイント

  • ?rel=0は2018年の仕様変更で使えない
  • 現状の解決策は動画をループさせる(?loop=1&playlist=youtubeID)

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村