youtube iframe api parameter rel=0 doesn't work

问题

I need to hide related videos after watching the video. I set rel=0, but it is not working. I am using this page for testing. The rel checkbox value doesn't affect on shown related videos after watching video.

It doesn't work in google chrome. In mozilla firefox it properly works.

回答1:

As of September 25, 2018, you are not be able to disable related videos. Instead, if the rel parameter is set to 0, related videos will come from the same channel as the video that was just played. YouTube API

回答2:

YouTube changed the rel=0 parameter as of September 2018 so that it no longer fully disables related videos.

However, you can work around this using the YouTube Player API to show custom HTML instead of related videos.

Here is some example code that displays a custom "replay" button over the video once it completes, hiding the related videos:

<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>

For the minified code along with further description, details and instructions, view my blog post on the subject.

回答3:

If you want to hide related video then you should call "player.stopVideo()" when player state is ended "PlayerState.ENDED".

PS: Sorry, english is not my first language.

回答4:

Mine wasn't working because the code spit out from the dev page https://developers.google.com/youtube/youtube_player_demo

was incomplete and missing the closing tag!

回答5:

This is because you are most likely signed in on your Chrome browser, but not your Firefox browser.

&rel=0 only works when not signed in. However, you can get around this by using the enhanced privacy mode:

https://www.youtube-nocookie.com/embed/[id]?rel=0

回答6:

Here i found a Solution. stopVideo on player state changed to ENDING

<!DOCTYPE html>
<html>
<head>
    <title>Alternative to hide Related Video & Info</title>
    <script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>

<div id="playerWrapOuter">
    <div id="playerWrap">
        <?php 
            $embed = '<iframe width="560" height="315" src="https://www.youtube.com/embed/HjxYvcdpVnU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
            preg_match('/src="(.+?)"/', $embed, $matches);
            $src = $matches[1];
            $params = array(
                'width'          => "640",
                'height'         => "360",
                'enablejsapi'    => 1,
                'rel'            => 0,
                'modestbranding' => 1,
                'showinfo'       => 0,
            );


            $querystring  = http_build_query($params, $src);
            $new_src = $src.'?'. $querystring;
            $embed = str_replace($src, $new_src, $embed);
            $embed = str_replace( '<iframe ', '<iframe ', $embed );

            echo $embed; 
        ?>
    </div>
</div>
<script>
    (function() {
        var player;
        var playerFrame = document.currentScript.previousElementSibling.querySelector("iframe");

        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player(playerFrame, {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        };
        window.onPlayerStateChange = function(event) {
            if (event.data == YT.PlayerState.ENDED) {
                player.stopVideo();
            }
        };

    })();
</script>
</body>
</html>

Here is a fiddle demo: https://jsfiddle.net/Aishan/znabhuo2/ Hope that helps!!

回答7:

As stated by Irina Kovalchuk above, as of September 25, 2018, you are not be able to disable related videos.

But I found a workaround:

setInterval(function () {
    if (player.getCurrentTime() >= player.getDuration()-1) {
        player.seekTo(1);  
    }
}, 100);

as soon as video reaches to end move seek pointer to start. It won't give time to show related videos. This workaround is suitable if you want to play video in loop

回答8:

Checked this both with Chrome and Opera, it works.

https://jsfiddle.net/o8ztczn6/

<iframe width="560" height="315" src="https://www.youtube.com/embed/6UVZpQ8cLSQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

No related video is shown on finishing.

来源：https://stackoverflow.com/questions/48386252/youtube-iframe-api-parameter-rel-0-doesnt-work

标签

youtube-iframe-api