Skip to content
Simple youtube player created with angular and typescript. See demo.
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Demo Angular YouTube Player Logo

About Player


GitHub license GitHub forks GitHub stars

This is a simple youtube web player based on angular-cli, ngx-socket-io, @angular/cdk.

This player is compatible only with Chrome/webkit browsers.

The project status is beta.

How to use

For development

  1. Install NodeJS 10.16.0+

  2. Download/clone repository then install the player by

npm install in root folder (not in /src)

  1. Add your youtube api key in src/app/environments/settings.ts or inside the app on settings page (when is running)

  2. To connect to your server

You must change inside src/app/environments/environment.ts your path to your server.

  1. Connect to your server

npm start in root folder

For building the app

  1. Install angular-cli 7.3.7+

npm install -g @angular/cli

  1. Run inside the root folder (not in /src)

Check angular documentation for other build options.

ng build --prod=true


Angular YouTube Player 2.5.1

  • Upgrade angular to LTS (from 7 to 8)
  • Fixed repeat mode
  • Update layout for playlist / related videos

Angular YouTube Player 2.5

  • Cleaned the project to avoid using a lot of dependencies
  • Fix the issue when you change the region didn't updated the player
  • Improved UX for playlist
  • Added client name to identify each users in the room

Angular YouTube Player 2.4

  • Switched from firebase to json through and private server
  • Responsive layout
  • Sync player in session
  • Rooms: join/leave room by unique id
  • Playlist is no more auto populated when is empty
  • You can't export/import anymore from .JSON file

Angular YouTube Player 2.3.3

  • Fixed bugs after refactoring
  • Added session key for playlist which you can upload to cloud and download from cloud (integrated with firebase)
  • Layout update
  • Updated from angular 5.2.0 to 7.0.1
  • Carousel added for related videos (used ngu-carousel)

Angular YouTube Player 2.3

  • Updating to LTS angular
  • Refactoring entire app services and components
  • Improved speed performance and fixed major bugs
  • New way to loading the app

Angular YouTube Player 2.2

Angular YouTube Player 2.1

  • Categories with videos like (music, gaming, autos, films, sports, etc.)
  • Refactoring code
  • Search on specific region
  • Fixing copy link for featured video
  • UX improvements

Angular YouTube Player 2.0.1

  • Import & export youtube playlist as .JSON file

Angular YouTube Player 2.0

  • Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)
  • Adding support for NW.js to export the app for desktop compatible: Windows x64, Linux x64
  • Auto updating the app (desktop version)

Angular YouTube Player 1.9.2

  • UX improvements and fixes
  • Preparing files for 2.0

Angular YouTube Player 1.9.1

  • Get settings.json for localstorage if your localstorage is empty
  • The playlist automatically saving, if is empty it will be populated with related videos
  • Toggle light/dark theme mode
  • Share link button for all videos
  • Reorganised settings page
  • Auto saving for internal settings (check settings)
  • Manual saving for external settings (check settings)
  • Performance, UI and UX improvements and fixes

Angular YouTube Player 1.9

  • Add/remove items from playlist, first time when is initialized It is prepopulated with related videos
  • Next/prev video from your playlist
  • Moved history to separate page
  • Adding toggle video, repeat mode and list & grid on trending to settings.json
  • Small fixes

Angular YouTube Player 1.7

  • Added featured video as first video from trending
  • Notifications for important actions you do
  • Removed debugging mode
  • Preparing packages, code and files for v2.0
  • Improved UI/UX for lists

Angular YouTube Player 1.6

  • Video details for current video and trending videos like number of views, likes and dislikes
  • Share link for current video
  • Added new setting for hiding all thumbnails
  • Custom player buttons shows now only when you hide video

Angular YouTube Player 1.4

  • History of your watched videos
  • Small fixes

Angular YouTube Player 1.3

  • Show/hide video player
  • Repeat video
  • Grid/list mode for trending videos
  • Settings (you can set default from "assets/settings.json", soon will be directly from settings)
  • Change country for trending videos (currently only three countries, US, UK and RO)
  • Max results show in search (0 to 50)
  • YOUR_API Key
  • Max related videos (0 to 50)

Angular YouTube Player 1.2

  • Introducing trending videos, currently default trending videos are from United States
  • Refactoring the code
  • Adding routes for future components which it will show in left navbar
  • Default video will be first from trending videos
  • Adding the video player
  • Update the design to match the new features

Angular YouTube Player 1.1

  • Adding mute/unmute functionality
  • Improved user interface and user experience
  • Adding settings functionality, the settings will get from assets/settings.json


  • Show/hide debugging features
  • Show/hide thumbnails in search

Angular YouTube Player 1.0.2

  • Change volume on your video
  • Related videos

Angular YouTube Player 1.0.0

  • Search and play video from youtube
  • Play/pause video
  • Change time of your video that you want to listen

Future features


  • iOS 8+ / android 5+ app (unversioned)


  • Room chat (unversioned)

Roadmap to 3.0

  • List of users joined in the session (in v2.6)
  • Set private/public room (in v2.7)
  • List of public rooms (in v2.9)
  • Room moderators which can add videos, kick roommates, mute roommates (in v2.9)

Roadmap to 4.0

  • Integrating YouTube account subscriptions/playlist (in v3.0)

Removed features

  • Global hotkeys for application in desktop (play/pause/next/prev, for keyboards with media buttons)
  • Adding support for NW.js to export the app for desktop compatible: Windows x64, Linux x64
  • Auto updating the app (desktop version)
  • Temporary removed theme function

Copyright and License

Copyright quead under the MIT license.

You can’t perform that action at this time.