CODEWITHSUNDEEP
ionic-frameworkyoutube-apiionic3android-youtube-api
dr b
dr b

Reputation: 2249

Using Ionic 3, is there any way to load videos that are restricted via youtube api?

I'm trying to make an app in Ionic for playing youtube videos, however I can't get it to load videos that are domain restricted. When launching ionic in the browser, it works with no issues in chrome but when launching on the phone you get the message "This video contains content from ____. It is restricted from playback on certain sites or applications."

I've researched this pretty extensively and all of the other solutions are not working for me, like setting an origin value in PlayerVars when creating a player or using the iframe tag itself.

In my code i've tried constructing a player with a domain/origin and using a domain/origin with the IFrame tag itself. Both of these do not work. Iframe has the same issue i've mentioned above, and origin in the playervars section comes back with "an error occured, please try again later" and an error id that changes each time.

I believe that this is because of the way ionic uses a headless browser to render the webview and the youtube iframe javascript code not setting an origin/referrer when calling the embedded video. 

 <iframe id="player" type="text/html" 
    src="http://www.youtube.com/embed/26yFO5lnkgU?enablejsapi=1&origin=http://www.youtube.com"
    frameborder="0"
    align="middle"
    class='frameplayer'
    width="90%" 
    height="95%"
    allowfullscreen
    autoplay="1"
    origin="http://www.youtube.com" >
    </iframe>

Also tried this when constructing my player:

 createPlayer(videoId): void {
console.log("creating new player")
let interval = setInterval(() => {
  if ((typeof _window.YT !== 'undefined') && _window.YT && _window.YT.Player) {
    console.log("making new player...");
    this.yt_player = new _window.YT.Player('pa', {
      width: '440',
      height: '300',
      playerVars: {
        enablejsapi: 1, //origin considerations when using this
        iv_load_policy: '3',
        rel: '0',
        modestbranding: 1,
        autoplay: 1,
        controls: 0,
        origin: "http://www.youtube.com",
        widget_referrer:"http://www.youtube.com"
      },
      events: {
        onStateChange: (ev) => {
          this.onPlayerStateChange(ev);
        },
        onReady : (ev) => {
          this.playVideo(videoId);
        }
      }
    });
    clearInterval(interval);
  }
}, 100);

}

I've tried just origin, and the widget_referrer by themselves and neither of those worked.

Has anyone recently come across this same issue and any fixes? Does youtube let other apps whitelist as approved apps? Also a route i would go down.

Upvotes: 0

Views: 1264

Answers (1)

dardo
dardo

Reputation: 4970

Sounds like you might be running into CORS issues.

The iframe API requires you to be launching from a known website so YouTube can verify where the request is coming from.

Given it seems like you’re developing for Android, you should instead use the Native YouTube API.

Ionic implementation here: https://ionicframework.com/docs/native/youtube-video-player/

Upvotes: 0

Related Questions