ng2-youtube (Angular2 youtubebar)
Angular2 youtube light player, using youtube iframe api. Inspired by echoes player. Complatible with latest release of angular 2.x.x.
Functionality
- fetch youtube video data provided video id and apiKey
- show sticky youtube bar at the bottom of page.
- Youtube bar has video data with video display and with controllers like play, pause, volume, mute, unmute progressbar.
Demo
Usage
Follow these steps:
systemjs.config.js
file.
1. Update your Add following line in map:
map: //... 'ng2-youtube': 'npm:ng2-youtube'
-and in packages:
packages: //... 'ng2-youtube': main: './index.js' defaultExtension: 'js'
2. Update the index.html
Add this boostrap cdn to you index.html page or download it and place it in you application's assets and then link it to index.html . If you are using angular2 bootstrap, dont include it.
3 Get google youtube api key
try to get api, https://developers.google.com/youtube/v3/getting-started. You will use this apikey later in setup.
4 Add modules and components
Firstly to fetch video title, description and thumbnail from youtube api we are going to make http call. -In your main module file import http module
;
-In your main module also import ng2-youtube componentsand services.
;
-Add component and providers into our ngModule
### 5 Add youtube iframe Api in html through main component -In your main component implement it with AfterViewInit so that it appends iframe api file after the view is initiated. To make sure it loaded after the view is created, else it will not work.
;
### 6 Use youtube component To show youtube bar in any component import youtube component in you component.
-In component decorator add youtube-player selecter like this.
youtube-player ="id" ="apiKey"/youtube-player
youtube player has 2 attributes that are necessary to be provided
- id = youtube video id
- apiKey = youtube developers api key to fetch youtube data.
-Thats all, it will start playing that video.