Is there any way to set referer to youtube-iframe-api?

Question

I am developing a Chrome extension and I am using youtube-iframe-api.

The player that is made by below codes can play any videos except some limited(?) videos such as vevo.

function onYouTubeIframeAPIReady() { 
  player = new YT.Player('player', {
  height: '300px',
  width: '800px',
  videoId: 'RhU9MZ98jxo', 
  playerVars: {
    'origin': 'https://www.youtube.com',
    'wmode': 'opaque'
  },
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
};

I added origin and wmode in playerVars because I had found some answers that they can solve the problem. But they did not work.

I am wondering that it is possible to play vevo videos with embed youtube player (iframe)

Xyloid

I have been trying to work on a solution too to this problem for the past weekend and to not avail, every header request points back to the original location which is what is causing the block to happen. – Murraymurre

I don't think this is possible. I think the problem lies in that the http referer is set by the browser itself when you embed the iframe, otherwise it would be a security violation. I'm more than happy to be corrected wrong if anyone is willing to tackle this though. I set a bounty. – Murraymurre

They are probably using frame busting headers to prevent you loading in iframe – Herv

u may find this useful : developer.vimeo.com/apis/oembed <---- – Concinnous

did you ever found solution for this? its not only vevo video gets blocked but lots of music videos – Libbie

Answer 1

I managed to play a vevo video in w3schools' "Try it yourself" by using the example provided in the youtube API documentation:

<div id="player">
</div>

<script>
      // 2. This code loads 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);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'tWQPbHXyoFQ',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>

What happens when you try to play vevo videos? what errors or messages do you get?

As a youtube uploader, you have the option to deny a video from being embedded in other websites besides youtube, in these cases you can't really do anything about it.

Audieaudience

The error is here. This video contains content from VEVO. It is restricted from playback on certain sites or applications. Watch on YouTube – Xyloid

When you do this on w3schools, the referrer of the header is marked as 'w3schools'. When you do this locally, its mapped to localhost which is likely going to be white or blacklisted by youtube. – Murraymurre

Yeah... that'll be the idiots at VEVO restricting their content as much as possible. If you can't find a way to make Chrome spoof the referrer header, you'll have to open an entire YouTube page in a new tab, which probably isn't what you wanted. – Missi

To add to what I meant by my earlier comment, if you running it locally as localhost, that works FINE, the issue is if you're serving your content and you have people test your youtube api magic without being on a domain via a direct ip connection, hardly nothing works if it has any music at all on it lol. That's also why this answer by bingeScripter isn't really a solution. – Murraymurre