mhatch mhatch - 1 month ago 19
Javascript Question

Embed YouTube Playlist plugin with sidebar list visible

I know that the YouTube API does not provide functionality to display a playlist sidebar similar to the native YouTube playlist at this time.

Through searching I found a promising plugin to imitate this behavior. https://github.com/jakiestfu/Youtube-TV

Unfortunately, this plugin no longer works with YouTube's API v.3, however, Giorgio003 created a fork with API v.3 support.
https://github.com/Giorgio003/Youtube-TV

I have followed all the installation instructions, but cannot seem to 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 included my API key

(function(win, doc) {
'use strict';
var apiKey = 'ThisIsARealKeyForMyChannel';
var YTV = YTV || function(id, opts){...


The ytv.js script seems to be running fine. It correctly finds my channel and the two sample videos I have uploaded. The rendered HTML for
#YourPlayerID
looks like this:

<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&amp;origin=http%3A%2F%2Fdevcf9.acm.org&amp;controls=1&amp;rel=0&amp;showinfo=0&amp;iv_load_policy=3&amp;autoplay=0&amp;theme=dark&amp;wmode=opaque&amp;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-c-k-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 no video or playlist appears on the page. Can anyone see what I am missing?

Answer

I was able to solve the problem. All the elements created from the plugin set the height to 100%. The element <div id="YourPlayerID"></div> had a height of 0, therefore, all its children had a height of 0. Once I gave the #YourPlayerID element a height the playlist appeared.

Comments