📽️ YouTube Playlists
Next.js powered tool for creating on-the-fly YouTube playlists.
Demo available at:
- Create on the fly playlists from YouTube without cluttering your real YouTube account's saved playlists
- Progressive Web App - Installable on mobile
- Web Share Target - You can 'share' from any other Android App to this PWA
- Shareable Playlist URLs - Send your friends the URL, share playlists without any accounts
- Google Cast Functionality [Coming Soon]
🏁 Getting Started
Simply drag-and-drop a YouTube URL / Tab onto the page and it will be added to the ephemeral playlist. Alternatively, if given permission, it will also recognize YouTube URLs in your clipboard once you focus onto the page and ask if you would 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.
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 serverless function / Cloudflare Worker component to the application for fetching video details from the YouTube API without exposing your YouTube API key in the frontend code.
The only requirement to host your own instance, other than the hosting itself, is a YouTube API Key. You can visit developers.google.com/youtube/v3/getting-started for details on how to obtain one.
Fetching the video details from YouTube happens in a serverless function. In our case it is designed to be run in a Cloudflare Worker. You can find the code for said worker in the
serverless_youtube.js file. If you prefer not to use a worker, you can copy the few functions from that file back into
index.js. Be aware, however, that your YouTube API key will then be part of the frontend bundle shipped to each user and visible in plaintext.
👷 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
fetchURL in the React code
111to your own Worker URL Cloudflare just generated for you
- You can also uncomment line
37to enable CORS for your frontend's domain
- Deploy the worker and the frontend to your host of choice
You can run this project locally by doing the following:
- Clone the repo
git clone https://github.com/ndom91/youtube-playlists
- Install dependencies
cd youtube-playlists && npm install
- Start dev server
Please stick to the
prettier settings when creating a PR.
Project by ndom91, released under MIT license.