CODEWITHSUNDEEP
youtube-iframe-api
Viktor
Viktor

Reputation: 111

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.

Upvotes: 11

Views: 43668

Answers (8)

Manpreet Singh Dhillon
Manpreet Singh Dhillon

Reputation: 903

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

Upvotes: 1

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

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.

Upvotes: 8

Aishan
Aishan

Reputation: 111

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

Upvotes: 1

Irina
Irina

Reputation: 784

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

Upvotes: 15

Artur
Artur

Reputation: 211

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.

Upvotes: 4

Chris
Chris

Reputation: 58242

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

Upvotes: 5

Morgan Seibert
Morgan Seibert

Reputation: 1

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

Upvotes: 0

ild flue
ild flue

Reputation: 1361

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.

Upvotes: -3

Related Questions