Hide/remove related videos from embed Youtube Video, play again from start after YouTube video finish/end

Before we are embedding youtube video easily with no relative video option but now that is not possible for us to d like that. now we need to find other why to hide relative video of youtube.

Before September 2018, a user are able to disable related videos on YouTube embeds by simply adding ?rel=0 to the iframe’s src like this:

<figure><iframe width="640" height="360" src="https://www.youtube.com/embed/C0DPdy98e4c?rel=0" frameborder="0"></iframe></figure>

Now no need to worry because i find one solution to hide relative video and play back from start using youtube API.

Youtube will provide us API to handle all event and using that we are able to track user actions and manage our contents show/hide on above player frame. Im going to describe you how to do this it’s very simple.

First we need to write sample HTML as below

<div id="ytC0DPdy98e4c"><!--Video will load here--></div>
<!--Poster of current video-->
<div class="img-wrap" id="cover_poster" onclick="playnow()" >
<img src="https://img.youtube.com/vi/C0DPdy98e4c/maxresdefault.jpg?origin=https://9code.info"
        frameborder="0"/>
</div>
<!--button-->
<div class="pv_yt_player_btn C0DPdy98e4c" id="pv_yt_player_btn" onClick="playnow();" > </div>

Now we writing youtube javascript API script to handle user actions

<script type="text/javascript">
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player("ytC0DPdy98e4c", {
        videoId:"C0DPdy98e4c",
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
  function onPlayerReady(event) {
       player.playVideo();
  }
  function onPlayerStateChange(event) {
        playerStatus=event.data;
        
        if (playerStatus == -1) {
           // updateTimerDisplay();
            clearInterval(time_update_interval);

            document.getElementById('cover_poster').style="display:none";
           
            document.getElementById('pv_yt_player_btn').style="display:none";
            document.getElementById("ytC0DPdy98e4c").style="display:block";
           

        } else if (playerStatus == 0) {
          event.target.seekTo(0);
          
        } else if (playerStatus == 1) {
            document.getElementById('cover_poster').style=";display:none";
            document.getElementById('pv_yt_player_btn').style="display:none";
            document.getElementById("ytC0DPdy98e4c").style="display:block";
            
           
        } else if (playerStatus == 2) {

               document.getElementById('cover_poster').style="display:block;height:85%;";
               document.getElementById('pv_yt_player_btn').style="display:block";
                document.getElementById("ytC0DPdy98e4c").style="display:none";

        } else if (playerStatus == 3) {
            time[player_id]=player.getCurrentTime();
           // buffering
        } else if (playerStatus == 5) {
           // video cued
        }
  }

  

var time=[];
var time_update_interval;
// This function is called by initialize()
function updateTimerDisplay(){
        time["ytC0DPdy98e4c"]=player.getCurrentTime();
}
var loaded=false;
function playnow(){
    if(loaded==false){
        loaded=true;
          var tag = document.createElement('script');
          tag.id =player_id= "ytC0DPdy98e4c";
          tag.src = 'https://www.youtube.com/iframe_api';
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }
    else{
        player.playVideo();
    }
    document.getElementById('cover_poster').style="display:none";
    document.getElementById('pv_yt_player_btn').style="display:none";
    document.getElementById("ytC0DPdy98e4c").style="opacity:1";
}
</script>

Okay now just we need to apply css as below and all done as you want

<!--Style for overlay poster on above iframe-->
<style>
#cover_poster{
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
     position:absolute;
}
#cover_poster img{
width:100%;height:auto;
}
iframe{
    position:absolute;
    width: 100%;
    height: 100%;
     left: 0px;
    top: 0px;
}
.pv_yt_player_btn {
  
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/YouTube_play_buttom_icon_%282013-2017%29.svg/2000px-YouTube_play_buttom_icon_%282013-2017%29.svg.png);
    background-position: center center;
    background-size: 11%;
    background-repeat: no-repeat;
}
</style>

Okay so now you looking live demo so see below demo

If looking to see more videos example then refer https://myiict.com/

If you looking code or setup on your site then just write comment below