The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a YouTube playlist manager

Written by

Bernardo Palos

in

Building a YouTube playlist manager can be an interesting project. Below is a detailed guide on how to create a simple YouTube playlist manager using JavaScript and the YouTube Data API v3. This example will focus on key features like:

  • Listing your playlists

  • Creating a new playlist

  • Adding videos to playlists

  • Viewing playlist videos

Requirements

  • Google account with YouTube channel

  • Google Cloud project with YouTube Data API enabled

  • OAuth 2.0 credentials (client ID and client secret)

Step 1: Setup Google Cloud Project & OAuth 2.0

  1. Go to Google Cloud Console

  2. Create a new project.

  3. Enable the YouTube Data API v3.

  4. Create OAuth 2.0 Client ID credentials:

    • Application type: Web Application

    • Add authorized JavaScript origins and redirect URIs.

  5. Download your client ID and secret.

Step 2: Basic HTML structure

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>YouTube Playlist Manager</title>
<script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
  <h1>YouTube Playlist Manager</h1>
  <button id="authorize_button">Authorize</button>
  <button id="signout_button" style="display:none;">Sign Out</button>

  <div id="content" style="display:none;">
    <h2>Your Playlists</h2>
    <ul id="playlists"></ul>

    <h3>Create New Playlist</h3>
    <input type="text" id="playlist_title" placeholder="Playlist Title" />
    <textarea id="playlist_description" placeholder="Playlist Description"></textarea>
    <button id="create_playlist">Create Playlist</button>

    <h3>Add Video to Playlist</h3>
    <input type="text" id="playlist_id" placeholder="Playlist ID" />
    <input type="text" id="video_id" placeholder="Video ID" />
    <button id="add_video">Add Video</button>

    <h3>Playlist Videos</h3>
    <input type="text" id="view_playlist_id" placeholder="Playlist ID" />
    <button id="view_videos">View Videos</button>
    <ul id="playlist_videos"></ul>
  </div>

<script src="app.js"></script>
</body>
</html>

Step 3: JavaScript code (app.js)

js
const CLIENT_ID = 'YOUR_CLIENT_ID_HERE';
const API_KEY = 'YOUR_API_KEY_HERE';
const DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"];
const SCOPES = 'https://www.googleapis.com/auth/youtube.force-ssl';

const authorizeButton = document.getElementById('authorize_button');
const signoutButton = document.getElementById('signout_button');
const content = document.getElementById('content');
const playlistsList = document.getElementById('playlists');
const playlistVideosList = document.getElementById('playlist_videos');

function handleClientLoad() {
  gapi.load('client:auth2', initClient);
}

function initClient() {
  gapi.client.init({
    apiKey: API_KEY,
    clientId: CLIENT_ID,
    discoveryDocs: DISCOVERY_DOCS,
    scope: SCOPES,
  }).then(() => {
    gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

    updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());

    authorizeButton.onclick = () => gapi.auth2.getAuthInstance().signIn();
    signoutButton.onclick = () => gapi.auth2.getAuthInstance().signOut();
  });
}

function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    authorizeButton.style.display = 'none';
    signoutButton.style.display = 'block';
    content.style.display = 'block';
    listPlaylists();
  } else {
    authorizeButton.style.display = 'block';
    signoutButton.style.display = 'none';
    content.style.display = 'none';
  }
}

function listPlaylists() {
  playlistsList.innerHTML = 'Loading...';
  gapi.client.youtube.playlists.list({
    part: 'snippet',
    mine: true,
    maxResults: 25,
  }).then(response => {
    const playlists = response.result.items;
    if (!playlists || playlists.length == 0) {
      playlistsList.innerHTML = 'No playlists found.';
      return;
    }
    playlistsList.innerHTML = '';
    playlists.forEach(pl => {
      const li = document.createElement('li');
      li.textContent = `${pl.snippet.title} (ID: ${pl.id})`;
      playlistsList.appendChild(li);
    });
  });
}

document.getElementById('create_playlist').addEventListener('click', () => {
  const title = document.getElementById('playlist_title').value;
  const description = document.getElementById('playlist_description').value;

  if (!title) {
    alert('Please enter a playlist title');
    return;
  }

  gapi.client.youtube.playlists.insert({
    part: 'snippet,status',
    resource: {
      snippet: {
        title: title,
        description: description,
      },
      status: {
        privacyStatus: 'private'
      }
    }
  }).then(response => {
    alert(`Playlist created with ID: ${response.result.id}`);
    listPlaylists();
  }, err => alert('Error creating playlist: ' + err.result.error.message));
});

document.getElementById('add_video').addEventListener('click', () => {
  const playlistId = document.getElementById('playlist_id').value;
  const videoId = document.getElementById('video_id').value;

  if (!playlistId || !videoId) {
    alert('Please enter both playlist ID and video ID');
    return;
  }

  gapi.client.youtube.playlistItems.insert({
    part: 'snippet',
    resource: {
      snippet: {
        playlistId: playlistId,
        resourceId: {
          kind: 'youtube#video',
          videoId: videoId
        }
      }
    }
  }).then(response => {
    alert('Video added to playlist');
  }, err => alert('Error adding video: ' + err.result.error.message));
});

document.getElementById('view_videos').addEventListener('click', () => {
  const playlistId = document.getElementById('view_playlist_id').value;
  if (!playlistId) {
    alert('Please enter playlist ID');
    return;
  }

  playlistVideosList.innerHTML = 'Loading...';

  gapi.client.youtube.playlistItems.list({
    part: 'snippet',
    playlistId: playlistId,
    maxResults: 25
  }).then(response => {
    const items = response.result.items;
    if (!items || items.length == 0) {
      playlistVideosList.innerHTML = 'No videos found in this playlist.';
      return;
    }
    playlistVideosList.innerHTML = '';
    items.forEach(item => {
      const li = document.createElement('li');
      li.textContent = `${item.snippet.title} (Video ID: ${item.snippet.resourceId.videoId})`;
      playlistVideosList.appendChild(li);
    });
  }, err => alert('Error fetching videos: ' + err.result.error.message));
});

// Load the API client and auth2 library
handleClientLoad();

How it works

  • When you load the page, it shows an Authorize button.

  • Clicking it opens Google’s OAuth consent screen.

  • After login, it lists your playlists.

  • You can create new playlists, add videos to them by providing video and playlist IDs, and view videos in any playlist.

Notes

  • Replace 'YOUR_CLIENT_ID_HERE' and 'YOUR_API_KEY_HERE' with your actual credentials.

  • To get a video ID or playlist ID, look at YouTube URLs (e.g., https://www.youtube.com/watch?v=VIDEO_ID or https://www.youtube.com/playlist?list=PLAYLIST_ID).

  • This is a client-side demo using the Google API JavaScript client.

  • For production apps, consider backend authentication flow and error handling.

If you want me to provide a more advanced version or a server-based implementation (Node.js, Python, etc.), just ask!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About