6

I am trying to get the embedded videos to stop showing at the end of the embedded YouTube videos on my website. I have tried the ?rel=0 and it does not work. Any other ideas?

3

As of September 2018 Youtube has made it impossible to remove related videos. You will always get related videos from now on.

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.

1

Try this :

https://your_youtube_embeded_link?rel=0&showinfo=0

sample :

<iframe src="https://www.youtube.com/embed/h-_gFbNF80s?rel=0&amp;showinfo=0" ></iframe>

rel=0 is to remove the related videos at end of YouTube embedded video

showinfo=0 is to remove the title inside youtube player at top

more information : YouTube Embedded Players and Player Parameters

  • Although the OP has already stated they've tried using rel=0 without success? – MrWhite Jan 30 '17 at 9:58
  • This answer adds showinfo=0 to that, maybe that is what is needed. – Stephen Ostermiller Jan 30 '17 at 11:30
  • just wanted to say this code works inserted as shown. Thanks – Christopher Buckley Jan 5 '18 at 13:24
  • 2
    developers.google.com/youtube/… where showinfo is depreciated after announcement of 23 Aug 2018 – Shashank Shah Oct 29 '18 at 10:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.