📽️ YouTube Playlists
Demo available at:
🏁 Getting Started
Simply drag-and-drop a YouTube URL / Tab onto the page and it will be added to the playlist. Alternatively, if given permission, it will also recognize YouTube URLs in your clipboard once you focus onto the page and ask if youd like to add the video to your playlist.
Once you've got your playlist organized, press "Play" and the application will begin auto-playing your videos, optionally staying in fullscreen mode throughout the remainder of the playlist.
- Create on the fly playlists from YouTube without cluttering your real YouTube saved playlists
- Progressive Web App - Installable on Mobile
- Web Share Target - You can 'share' from any other Android App to this App.
- Shareable Playlist URLs - Data is embeded into the URL Hash
- (Coming Soon) Google Cast Functionality
You can selfhost this application if you wish, details can be found below. The site itself is a simple react application which you can host on any provider like Netlify, Vercel, etc. There is also a Lambda / Cloudflare Worker component to the application for getting video details from the YouTube API.
The only requirement to host your own instance, other than hosting the page itself, is a YouTube API Key. You can visit developers.google.com/youtube/v3/getting-started for details on how to get your own key.
The functionality to fetch the video details happens in a serverless function, here designed to be run in a Cloudflare Worker. You can find the code for it in the
serverless_youtube.js file. These few functions can simply be copied back into
index.js if you prefer to not use a worker / serverless function, however then your YouTube API key will be part of the frontend bundle shipped to each user.
👷 Getting Started
In order to setup your own instance, you need to do the following:
- Get your own YouTube API Key
- Sign up for a free Cloudflare Workers account
- Create a new worker and copy the code from
serverless_youtube.jsinto the application
- Insert your YouTube API Key on line 2 in the variable
- Adjust the
111to your own worker URL
- You can also uncomment line
37to restrict CORS to only your frontend domain
- Deploy the worker and the frontend to your host of choice
This is very much still in early stages, but you can run it locally by:
- Clone the repo
git clone https://github.com/ndom91/youtube-playlists
- Install dependencies
- Start dev server
Please stick to the prettier / style-lint settings when creating a PR.