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

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)

1 Answers

Answers 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.

Read More

Change video property on innerHtml of an IFrame

I have this iframe for my embed youtube video:

<iframe class="event-video" src="http://www.youtube.com/embed/myvideoid?showinfo=0&autoplay=1&loop=1&playlist=myvideoid&controls=0&modestbranding=1&iv_load_policy=3"></iframe> 

I use loop=1 to loop the video, but everytime it restarts it loads again (the video freezes for a few seconds with the "loading" gif of youtube).

Since I want my video to loop continuously (seamless), this solution does not please me.

I discovered that if I right click on the video it shows me a HTML5 video box with some options, one of them to "loop" the video. If I click on this option, it changes the video element on the innerHtml of the iframe adding loop property to it.

And it solves my problem. The video doesn't reload on every loop anymore. My question is: how can I do this with jQuery? Is there some safe way to add this loop property on video element of iframe's innerHtml?

1 Answers

Answers 1

There is no way for you to change that because the video is not played on the same domain that your code is, which mean you cannot access the elements inside that iframe, however you can use youtube's JS API in order to loop your video when it ends.

This code will not add the "loop" attribute to the <video> element inside the iframe, but it will give you the loop feature that you are looking for (without reloading the video, just play it from the beginning):

    <!doctype html>      <html lang="en">          <head>              <meta charset="utf-8">              <title>Test</title>              <script src="http://www.youtube.com/player_api"></script>          </head>          <body>          <div id="player"></div>          <script type="text/javascript">              var player;              function onYouTubeIframeAPIReady() {                  player = new YT.Player('player', {                      height: '390',                      width: '640',                      videoId: 'M4Xrh8OP1Jk',                      events: {                      'onReady': onPlayerReady,                      'onStateChange': onPlayerStateChange                      }                  });              }                function onPlayerReady(event) {                  event.target.playVideo();              }                function onPlayerStateChange(event) {                  console.log(event.data)                  if (event.data == YT.PlayerState.ENDED) {                      event.target.playVideo();                  }              }          </script>    </body>  </html>

Read More