Youtube Sidebar

index.html

<!-- 
For more expanation, visit:
https://stackoverflow.com/questions/57459015/how-to-embed-a-youtube-playlist-with-a-sidebar 
-->

<div id="root">
  <iframe 
          width="438" 
          height="250"         
          src="https://www.youtube.com/embed/videoseries?list=PLkSaehvtoPcxdDhbdig_EYYVl5ONrhAqt" 
          frameborder="0" 
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
          allowfullscreen="1"
          id="iframe_yt"
          ></iframe>
  <div>
    <div class="center_arrow">
      <img src="http://aux.iconspalace.com/uploads/drop-down-vector-icon-256.png" width="25px" style="transform: scaleY(-1);" onClick="goUp();"/>
    </div>
    <div class="playlist"></div>
    <div class="center_arrow">
      <img src="http://aux.iconspalace.com/uploads/drop-down-vector-icon-256.png" width="25px" onClick="goDown();"/>
      </div>
  </div>
</div>

script.js

const API_KEY = 'AIzaSyB7mPs042i3i0IF0k5f3H1OimLbvBHeYk0';
const API_ID = '264481683198-g3ugh7tgc58pe4tgbbpt1cs4524ov5ho.apps.googleusercontent.com';
const PLAYLIST_ID = 'PLkSaehvtoPcxdDhbdig_EYYVl5ONrhAqt';

var videoVisible = 0;
var maxVideoVisible = 50;

const playlistItems = [];
const playlist = document.getElementsByClassName("playlist")[0];

// From Google API Docs
function initAPIClient() {
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: API_ID});
    loadClient().then(getPlaylistItems);
  });  
};

// From Google API Docs
function loadClient() {
  gapi.client.setApiKey(API_KEY);
  return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
    .then(
    function() { 
      console.log("GAPI client loaded for API"); },
    function(err) { 
      console.error("Error loading GAPI client for API", err); 
    });
}

function getPlaylistItems(pageToken) {
    return gapi.client.youtube.playlistItems.list({
      "part": "snippet,contentDetails",
      "maxResults": 50, // This is the maximum available value, according to the google docs
      "playlistId": PLAYLIST_ID,
      pageToken
    })
      .then(function(response) {
      const { items, nextPageToken } = response.result;
      
      // The items[] is an array of a playlist items.
      // nextPageToken - if empty - there are no items left to fetch
      
      playlistItems.push(...items);
      
      // It's up to you, how to handle the item from playlist. 
      // Add `onclick` events to navigate to another video, or use another thumbnail image quality 
      var index = 0;
      items.forEach(function(item) {
          const thumbnailItem = createPlaylistItem(item, index);
          playlist.appendChild(thumbnailItem);
          index++;
        });
      
      maxVideoVisible = index - 3;
      

      // Recursively get another portion of items, if there any left
      if (nextPageToken) {
        getPlaylistItems(nextPageToken);        
      }
    },
  function(err) { console.error("Execute error", err); });
}

function createPlaylistItem(i, index) {
  var changeIndex = index;
  const item = document.createElement('div');
  item.classList.add('playlist-item');
  item.style.background = `url(https://i.ytimg.com/vi/${i.snippet.resourceId.videoId}/mqdefault.jpg) no-repeat center`;
  item.style.backgroundSize = 'contain';
  item.id = index.toString();
  item.addEventListener("click", function(){ 
    document.getElementById('iframe_yt').src = "https://www.youtube.com/embed?listType=playlist&list=PLkSaehvtoPcxdDhbdig_EYYVl5ONrhAqt&autoplay=1&index=" + changeIndex.toString();
  });
  return item;
};

// Before doing any action with the API ->
initAPIClient();

function goUp(){
  if (videoVisible > 0){
    videoVisible--;
    document.getElementById(videoVisible.toString()).style.height = "90px";
  }
}
function goDown(){
    if (videoVisible < maxVideoVisible){
      document.getElementById(videoVisible.toString()).style.height = "0px";
     videoVisible++;    
  }  
}

scripts

<script src="https://apis.google.com/js/api.js"></script>

style.css

#root {
  display: flex;
}

.playlist {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  margin: 0 20px;
  height: 270px;
  width: 150px;
  overflow-y: hidden;
}

.playlist {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  margin: 0 20px;
  height: 270px;
  width: 150px;
  overflow-y: hidden;
}

.playlist-item {
  display: flex;
  box-sizing: border-box;
  width: 100px;
  height: 90px;
  flex-shrink: 0;
  transition: all 0.3s;
}
.center_arrow{
  width: 190px;
  text-align: center;
}
#iframe_yt{
  margin-top: 29px;
}
img:hover, .playlist-item:hover {
  cursor: pointer;
}

youtube-sidebar.markdown

Youtube Sidebar

A Pen by zwaper on CodePen.

License.