web-dev-qa-db-ja.com

YouTubeプレイリストの埋め込みコードの最後で関連動画を非表示にするにはどうすればよいですか？

私はこのコードを使用してプレイリストを埋め込みます：

<iframe width="816" height="459"     
  src="https://www.youtube.com/embed/videoseries?list=xxx" 
  frameborder="0" allowfullscreen="">

関連する動画を非表示にするために、通常?rel=0（単一の動画埋め込みの場合）を追加しますが、ここで試してみると：

<iframe width="816" height="459" src="https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm?rel=0" 
 frameborder="0" allowfullscreen="">
 </iframe>

「悪いビデオ」のあいまいなYouTube画面が表示されます（申し訳ありませんが、この技術用語はわかりません）。

YouTubeのプレイリストの[詳細を表示]設定には、[関連を隠す]オプションはありません。

videoiframeyoutubeembedplaylist
49
Penanghill

URLにパラメーターを追加する場合は、「＆」を使用する必要があります。 srcフィールドを次のように更新します。

"https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm&rel=0"
77
Saumini Navaratnam

2018年9月25日 関連動画の表示を無効にする方法はありません。

変更の効果は、関連する動画を無効にできないことです。 ただし、プレーヤーに表示される関連動画は、再生されたばかりの動画と同じチャンネルからのものであることを指定するオプションがあります。

もう少し詳しく言うと：

  • 変更前に、パラメーターの値が0に設定されている場合、プレーヤーは関連するビデオを表示しません。
  • 変更後、relパラメータが0に設定されている場合、プレーヤーは、再生されたばかりのビデオと同じチャンネルからの関連ビデオを表示します。

強調を追加

31
Turner Bass

YouTube 関連動画の非表示を防止 2018年9月現在、rel=0を使用。

ただし、YouTube Player APIを使用して、関連するビデオの代わりにカスタムHTMLを表示することで、この問題を回避できます。

以下は、関連する動画を非表示にして、動画が完了すると動画の上にカスタムの「再生」ボタンを表示するコードの例です。

<style>
    #playerWrap {
        display: inline-block;
        position: relative;
    }
    #playerWrap.shown::after {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        cursor: pointer;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 64px 64px;
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
    }
</style>
<div>
    <div id="playerWrap">
        <iframe
            width="640" height="360"
            src="https://www.youtube.com/embed/0sDg2h3M1RE?enablejsapi=1"
            frameborder="0"
        ></iframe>
    </div>
</div>
<script>
  var playerFrame = document.currentScript.previousElementSibling.children[0].children[0];

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player(playerFrame, {
      videoId: 'M7lc1UVf-VE',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        document.getElementById("playerWrap").classList.add("shown");
    }
  }

  document.getElementById("playerWrap").addEventListener("click", function() {
    player.seekTo(0);
    document.getElementById("playerWrap").classList.remove("shown");
  });
</script>

縮小版、説明、デモ、手順を含む最新のコードについては、 テーマに関するブログ投稿を表示 。

6
Maximillian Laumeister

関連する動画を停止するために、もう1つのパラメーターを'?rel=0'として渡しました。
それは私のために-

'https://www.youtube.com/embed/'+someValiable_of_video_link+'?rel=0';

希望は他の人にも役立つかもしれません。 &の代わりに?は機能しませんでした！

1
S.Yadav