youtube iframe api parameter rel=0 doesn't wor

2019-06-17 08:31发布

站内问答 / 后端开发
505 7 6

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.

7条回答
Animai°情兽
2楼-- · 2019-06-17 09:18

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.

查看更多
0人赞 添加讨论(0) 举报
The star\"
3楼-- · 2019-06-17 09:19

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

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
4楼-- · 2019-06-17 09:19

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

查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
5楼-- · 2019-06-17 09:27

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!

enter image description here

查看更多
0人赞 添加讨论(0) 举报
The star\"
6楼-- · 2019-06-17 09:32

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

查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
7楼-- · 2019-06-17 09:32

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.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)