嵌入带有侧边栏列表的 YouTube 播放列表插件答案

【问题标题】：Embed YouTube Playlist plugin with sidebar list visible嵌入带有侧边栏列表的 YouTube 播放列表插件
【发布时间】：2016-10-28 15:29:46
【问题描述】：

我知道 YouTube API 目前不提供显示类似于原生 YouTube 播放列表的播放列表侧边栏的功能。

通过搜索，我找到了一个很有前途的插件来模仿这种行为。 https://github.com/jakiestfu/Youtube-TV

不幸的是，这个插件不再适用于 YouTube 的 API v.3，然而，Giorgio003 创建了一个支持 API v.3 的分支。 https://github.com/Giorgio003/Youtube-TV

我已按照所有安装说明进行操作，但似乎无法正常工作。

这是我的页面：

<!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>

在 ytv.js 中我包含了我的 API 密钥

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

ytv.js 脚本似乎运行良好。它正确地找到了我的频道和我上传的两个示例视频。 #YourPlayerID 的渲染 HTML 如下所示：

<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>

但页面上没有视频或播放列表。谁能看到我错过了什么？

【问题讨论】：

我还应该注意我在开发服务器上运行它。我有时注意到在本地运行页面时 youtube 嵌入无法正常工作。

标签： javascript youtube-api

【解决方案1】：

我能够解决问题。从插件创建的所有元素都将高度设置为 100%。元素<div id="YourPlayerID"></div> 的高度为0，因此其所有子元素的高度为0。一旦我给 #YourPlayerID 元素一个高度，播放列表就会出现。

【讨论】：