YT.ready is not a function

[jsindos]

I'm using angular-youtube-embed in an es6 webpack angular project. I'm loading the youtube iframe API from a file youtubeapi.js, followed by import ./youtubeapi in index.js where the angular module declaration is made:

import './youtubeapi';
import angular-youtube-embed from 'angular-youtube-embed';

angular.module('videoApp', [angular-youtube-embed]);

When navigating to a page which uses videoApp, I get the error YT.ready is not a function.

On refreshing the page, the error goes away. I'm wondering how to make sure the youtube API has loaded before angular-youtube-embed directives are run?

[brandly]

could you try doing import YT from './youtubeapi'?

i'm not sure what ./youtubeapi exports, since i've never loaded it with an import statement like that, but it's worth a shot 🌟

[zrichardson8039]

Is it possible YT.ready (in line 101 of angular-youtube-embed.js) should actually be YT.load? When I look at the source of youtube-iframe, it seems to have a function called "load" that accepts a callback, but not a function called "ready".

[brandly]

if you check out the demo, YT is available globally on that page

[whiterook6]

I'm having the same problem. I don't know where YT.ready is supposed to come from. We're making a Cordova phonegap app, so we can't load external scripts from, say, youtube. I downloaded the script that www.youtube.com/iframe_api installs and am including that, but I also get the same error:

TypeError: YT.ready is not a function

When I debug and inspect the YT variable I get this:

What is YT supposed to look like?

[brandly]

take a look at the demo and type YT into the console. YT.ready is defined there.

idk much at all about cordova, but i think there's a way to whitelist domains to load external scripts.

good luck!