Youtube player app built with Angular 8 and NGRX that allows to search and view channels and start youtube videos on a video player using the
YouTube v3 API
.
A live demo of ng-youtube is hosted on Github Pages.
- Nodejs v10+
- yarnpkg (optional)
-
You need a Google Account to access the Google APIs Console, request an API key, and register your application.
-
Register your application with Google so that it can submit API requests:
-
After registering your application, select YouTube Data API as one of the services that your application uses.
- Go to the APIs Console and select the project that you just registered.
- Click on APIs & auth on the left side. Then a dropdown will be opened.
- Select APIs.
- Search for YouTube Data API v3, click it and click Enable API
1- Install Angular-CLI :
$ npm install -g @angular/cli@latest
2- Clone the project:
$ git clone https://github.com/BnSalahFahmi/ng-youtube.git
$ cd ng-youtube
3- Install the npm packages described in the package.json :
$ npm install
4- Go back in your Google app and click again on APIs & auth, select Credentials and then click Create new Client ID:
- Select *Web application*
- Click <kbd>Configure consent screen</kbd>
- Complete the required fields:
- Product name: what ever you want (e.g. "Youtube API Test")
- Product logo is optional
- Home page is optional
- Save the changes
- Now you will have to set the auth urls. This test application uses the following urls:
- Authorized JavaScript origins: `http://localhost:4200/` (paste it in the first textarea)
- Authorized redirect URIs: `http://localhost:4200/oauth2callback` (paste it in the second textarea)
- Finally, click <kbd>Create Client ID</kbd>
OK, at this step you have the credentials (in your Google app). Now you have to use them in this test application:
- Go to environments folde and open
environment.ts
and replaceYOUTUBE_API_KEY
with the key generated previously. - Now you are ready. Start the script (
npm start
orng serve
), visithttp://localhost:4200
and enjoy!.
- Angular 8
- Angular CLI
- NGRX
- Angular Material
- Bootstrap 4
- ngx-infinite-scroll
- ng-mat-search-bar
- lodash
- angular-font-awesome
@author: 'Fahmi BEN SALAH < fahmii.bensalah@gmail.com >'
If you like the project, shoot a 🌟 and feel free to fork & send PR anytime.