HTML/CSS

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

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

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

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

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

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アクセスランキング にほんブログ村