MENU
Webエンジニアの高みを目指そう
  1. ホーム
  2. HTML/CSS
  3. YouTubeの関連動画を非表示にする方法

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

HTML/CSS

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

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

HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
総合評価
( 5 )
メリット
  • HTMLとCSSの基本が体系的に学べる
  • Webデザインの基本が学べる
  • 1つのWebサイトを作りながら学べる
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]
楽天ブックス
¥2,486 （2025/07/08 07:33時点 | 楽天市場調べ）
Amazonで探す
＼楽天ポイント5倍セール！／
楽天市場で探す
＼ポイント5%還元！／
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited
全プログラマー必見！
変数名/関数名にもう悩まない！
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
Amazonで探す
＼楽天ポイント5倍セール！／
楽天市場で探す
＼ポイント5%還元！／
Yahoo!ショッピングで探す
目次

Youtube動画を埋め込む方法

Youtube動画を埋め込む方法は以下の別ページで詳しく解説しているので、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)
HTML/CSS
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次