Use YouTube iframe API with Angular2 and Typescript

Question

How to create a YT.Player object and access its getCurrentTime() properties in getCurrentTime() component using Typescript?

I tried installing several YouTube wrappers via npm (ex: youtube-player ) and added Type Definitions for YouTube , with a link in app.ts:

/// <reference path="../../typings/main/ambient/youtube/index.d.ts" />

but I still get an error message when importing, for example: import YouTubePlayer from 'youtube-player'; returns Cannot find module 'youtube-player'.

I forked Angular2 preboot / Webpack , my source repo is here

Answer 1

import YouTubePlayer from "youtube-player"; return Cannot find the module 'youtube-player'

The library you are trying to use youtube-player does not match the typical library type definitions that you import: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/youtube/youtube.d.ts (this is a type definition for official youtube library )

Fix

You can easily create a declaration yourself in vendor.d.ts :

 declare module 'youtube-player' { var foo:any; export = foo; } 

And you will in no way be worse than using pure JavaScript.

More details

This is described here: https://basarat.gitbooks.io/typescript/content/docs/types/migrating.html#

Answer 2

I also had this problem. According to basarat, youtube.d.ts type definitions are not for the youtube-player package.

I followed the basarat advice and created a vendor.d.ts file in my samples folder and added a definition (typings / vendor.d.ts):

 declare module 'youtube-player' { var YouTubePlayer: any; export = YouTubePlayer; } 

Above was not enough to make it work, I need one more step. I used another import statement to finally make it work (MyController.ts):

 import * as YouTubePlayer from 'youtube-player'; export class MyController { constructor() { let player = YouTubePlayer('playerid'); player.loadVideoById('M7lc1UVf-VE'); player.playVideo(); } } 

Answer 3

You do not need any wrapper, including itself, it is not.

1.) include the youtube iFrame API through the script tag.

 ngAfterViewInit() { const doc = (<any>window).document; let playerApiScript = doc.createElement('script'); playerApiScript.type = 'text/javascript'; playerApiScript.src = 'https://www.youtube.com/iframe_api'; doc.body.appendChild(playerApiScript); } 

2.) register your callback inside onYouTubeIframeAPIReady () , which the Youtube API will call when the page finishes loading the JavaScript for the player’s API.

  ngOnInit() { (<any>window).onYouTubeIframeAPIReady = () => { this.player = new (<any>window).YT.Player('ytplayer', { height: '100%', width: '100%', videoId: 'YourVideoId', playerVars: {'autoplay': 1, 'rel': 0, 'controls': 2}, events: { 'onReady': () => { }, 'onStateChange': () => { } } }); }; } 

You can also set autoplay to 0 so that it does not play at boot.

Now we have this.player at the component level, and you can do other manipulations, for example:

• pause: this.player.pauseVideo(); ,
• upload another video this.player.loadVideoById('someOtherVideoId') etc.

Answer 4

Give https://github.com/orizens/ng2-youtube-player a try! Its written in ng2 / ts and can support your needs.