Search code examples
javascriptyoutubeyoutube-apiyoutube-javascript-apiyoutube-iframe-api

Override playerVars controls:attrib dynamically for videos in youtube API

I have below JS code for youtube API -

<html>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var ScriptTag = document.getElementsByTagName('script')[0];
ScriptTag.parentNode.insertBefore(tag, ScriptTag);

var player; 
      function onYouTubeIframeAPIReady() {                      
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId : 'YtF6p_w-cSc',                 
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }      
        });
      }       

       function onPlayerReady(event) {                                        
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event) {   
        if (event.data == YT.PlayerState.ENDED && !done) {   
            player.loadVideoById ('4MJRS-cLozU');
        }       
      }

</script>
<body>
  <div id="player"></div>  
 </body>
</html>

Here is jsfiddle

Description -

In the above code their are 2 videos that are played one after the other [i.e. initially YtF6p_w-cSc and then 4MJRS-cLozU]. Now, when the first video is loaded/played i want to hide the control [i.e. PlayerVar{control : 0}] below highlighted part in yellow should be eliminated. enter image description here

while for the other video i want it back [i.e control:1].

In simple words i want to hide control for 1st video and want it back for the 2nd video.

How to achieve this. Please help.!!

Solution

  • Below code worked for me - 

    <!doctype html>
<html>
<body>
<iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed/YtF6p_w-cSc?autoplay=1&controls=0&enablejsapi=1" frameborder="0"></iframe>

<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',      
      events: {                
            'onStateChange': onPlayerStateChange
          } 
    });              
      var done = false;
      function onPlayerStateChange(event) {   
        if (event.data == YT.PlayerState.ENDED && !done) {        
     document.getElementById('ytplayer').src ="https://www.youtube.com/embed/4MJRS-cLozU?autoplay=1&controls=1&enablejsapi=1"
        }       
      }
  }
</script>
</body>
</html>