I know that the YouTube API does not provide functionality to display the sidebar of a playlist similar to the original YouTube playlist at the moment.
Through a search, I found a promising plugin to simulate this behavior. https://github.com/jakiestfu/Youtube-TV
Unfortunately, this plugin no longer works with the YouTube API v.3, however Giorgio003 has created a fork with support for API v.3. https://github.com/Giorgio003/Youtube-TV
I followed all the installation instructions, but I can not get it to work.
This is my page:
<!DOCTYPE html> <html> <head> <link href="src/ytv.css" type="text/css" rel="stylesheet" /> <script src="src/ytv.js" type="text/javascript"></script> </head> <body> <div> Testing YouTube Playlist </div> <div id="YourPlayerID"></div> <script> document.addEventListener("DOMContentLoaded", function(event) { var controller = new YTV('YourPlayerID', { channelId: 'UCBSvZIJlXJR7SE_KNvOiiGg' }); }); </script> </body> </html>
In ytv.js, I have included my API key
(function(win, doc) { 'use strict'; var apiKey = 'ThisIsARealKeyForMyChannel'; var YTV = YTV || function(id, opts){...
ytv.js script seems to be working fine. It correctly finds my channel and two examples of videos that I uploaded. The HTML presented for #YourPlayerID as follows:
<div id="YourPlayerID" class="ytv-canvas"> <div class="ytv-relative"> <div class="ytv-video"> <iframe id="ytv-video-playerYourPlayerID0" class="ytv-video-playerContainer" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/VqWWn-NrebU?enablejsapi=1&origin=http%3A%2F%2Fdevcf9.acm.org&controls=1&rel=0&showinfo=0&iv_load_policy=3&autoplay=0&theme=dark&wmode=opaque&widgetid=1"></iframe> </div> <div class="ytv-list"> <div class="ytv-list-header"> <a href="//youtube.com/channel/UCBSvZIJlXJR7SE_KNvOiiGg" target="_blank"> <img src="https://yt3.ggpht.com/-IGpxPi95eQQ/AAAAAAAAAAI/AAAAAAAAAAA/z-D0JYX_Wog/s88-ck-no-mo-rj-c0xffffff/photo.jpg"> <span><i class="ytv-arrow down"></i>My Name</span> </a> </div> <div class="ytv-list-inner"> <ul> <li class="ytv-active"> <a href="#" data-ytv="VqWWn-NrebU" class="ytv-clear"> <div class="ytv-thumb"> <div class="ytv-thumb-stroke"></div> <span>00:42</span> <img src="https://i.ytimg.com/vi/VqWWn-NrebU/mqdefault.jpg"> </div> <div class="ytv-content"> <b>Skin 4144</b> <span class="ytv-views">1 Views</span> </div> </a> </li> <li> <a href="#" data-ytv="bAWFo5ur9fc" class="ytv-clear"> <div class="ytv-thumb"> <div class="ytv-thumb-stroke"></div> <span>00:16</span> <img src="https://i.ytimg.com/vi/bAWFo5ur9fc/mqdefault.jpg"> </div> <div class="ytv-content"><b>Nebula 6044</b> <span class="ytv-views">0 Views</span> </div> </a> </li> </ul> </div> </div> </div> </div>
But the video or playlist does not appear on the page. Can anyone see what I am missing?
source share