嵌入 YouTube 播放列表插件,侧边栏列表可见

2024-04-25

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

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

不幸的是,这个插件不再适用于 YouTube 的 API v.3,但是,Giorgio003 创建了一个支持 API v.3 的分支。https://github.com/Giorgio003/Youtube-TV 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 脚本似乎运行良好。它正确找到我的频道和我上传的两个示例视频。呈现的 HTML#YourPlayerID看起来像这样:

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

但页面上没有显示视频或播放列表。谁能看到我缺少什么吗?


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

嵌入 YouTube 播放列表插件,侧边栏列表可见 的相关文章

  • 如何检测形状是否被单击(HTML5 画布)?

    我正在使用画布绘制不同的形状 如矩形 三角形 六边形等lineTo方法如这个博客 http blog riacode in 2011 03 03 drawing regular polygons in html5 canvas 我只是想要一
  • Javascript .includes 函数无法与对象数组一起正常工作[重复]

    这个问题在这里已经有答案了 我有一个正在使用的对象数组 includes 功能 我正在使用数组中的对象搜索该数组 对象是相同的 但似乎没有匹配项 我已将问题复制到这把小提琴 https jsfiddle net 6dua0u0n 代码也在下
  • 如何按日期属性对对象数组进行排序?

    假设我有一个由几个对象组成的数组 var array id 1 date Mar 12 2012 10 00 00 AM id 2 date Mar 8 2012 08 00 00 AM 如何按日期元素从最接近当前日期和时间的日期开始对该数
  • 为什么服务器端和客户端脚本无法交互?

    我是客户端和服务器端脚本的新手 我想知道它们为什么不能交互 Code Conquest 指出的主要区别here http www codeconquest com website client side vs server side 就是它
  • nodeJS require.paths 解决问题

    我试图相对且神秘地需要一个文件 以下情况正在发生 这很有效 这表明 Users marcos Desktop Taper lib utils js myPath Users marcos Desktop Taper lib utils re
  • 在哪里声明类常量?

    我使用类成员来保存常量 例如 function Foo Foo CONSTANT1 1 Foo CONSTANT2 2 这工作得很好 除了它看起来有点无组织 所有代码都特定于Foo遍布全球范围 所以我考虑将常量声明移到内部Foo 声明 但是
  • Google Analytics 是否具有针对长时间运行的网络应用程序的“心跳”功能?

    我正在制作一个专注于观看嵌入内容的网络应用程序 我希望应用程序客户端向 GA Google Analytics 发送 心跳 类型的信号以保持会话继续进行 现在看来 如果访问者观看视频 5 10 分钟 GA 就会假设他已经离开页面 并将用户的
  • AngularJS:如何在 AngularJS 中使用或注入第三方库

    我是 Angular 和 Deployd 的新手 想知道如何一起使用它们 我发现 Deployd 网站中的示例很好 但它只消耗其余 API 数据 我想了解如何将 Deployd 作为 AngularJS 中的服务 例如 通过部署中可用的收集
  • 禁用 Chrome 的文本输入撤消/重做 (CTRL+Z / CTRL+Y)

    i m currently developing a web application and i encounter a problem As you might know or not chrome has a feature that
  • 如何使用 Material UI 制作一个圆形复选框?

    我尝试匹配的设计要求复选框为圆形 我正在使用 Material UI 和 React 边框半径不起作用 因为实际图标的边框不是可见复选框的边框 我不能只使用像 Font Awesome 这样的东西 因为它需要实际检查和取消检查 Curren
  • 属性列表后缺少 jquery 验证 }

    我这里有这个代码 order validate rules name required true lastname required true address required true telephone required true di
  • 如何使用环回设置 OAuth 2.0 服务器

    我想使用名为 Loopback component oauth2 的包使用 Loopback 设置 OAuth 2 0 服务器 文档在这里 https docs strongloop com display public LB OAuth
  • JavaScript:字符串连接性能低下? Array.join('')?

    我读过如果我有一个for循环 我不应该使用字符串连接 因为它很慢 例如 for i 0 i lt 10000000 i str a 相反 我应该使用Array join 因为它更快 var tmp for i 0 i lt 10000000
  • 在 WordPress 页面上嵌入 swf

    我正在尝试将 swf 嵌入到 WordPress 页面中 这听起来很简单 但它不起作用 我不明白为什么 我已将所有相关文件上传到服务器上 并且我相当确定所有文件路径都是正确的 包含 fla 和 swf 文件的文件夹还包含一个 index h
  • Socket.io 不断重复连接并忽略其他事件

    我正在尝试制作一个网络应用程序 用户可以在其中互相玩环形国际象棋 这是我的 app js 在服务器上 var express require express var app express var http require http Ser
  • 如何在 PHP、HTML 表单和 Javascript 之间传递布尔值

    我有一个 PHP 程序 它使用 HTML 表单并使用 JavaScript 进行验证 HTML 表单中有一个隐藏字段 其中包含一个布尔值 该值由 PHP 设置 由 JavaScript 在提交时进行验证 然后传递到另一个 PHP 页面 当我
  • 在 JavaScript 中添加事件的最佳方式是什么?

    我发现在 JavaScript 中设置事件有两种主要方法 直接在标签内添加一个事件 如下所示 a href do foo a 通过 JavaScript 设置它们 如下所示 a href do bar a 并在 a 中添加一个事件
  • JSON 和 AJAX 与 jQuery 有什么区别?

    我听说 JSON 会序列化所有数据 这可以防止我在跨浏览器支持等方面遇到客户端问题 我一直在使用 AJAX 和 jQuery 这看起来很简单 但我不确定其中的区别 我读过我也可以使用它来获取数据 ajax url url dataType
  • Selenium - 运行 javascript

    我有一个愚蠢的问题 如何运行位于测试站点上的脚本 我可以运行警报 但我无权访问我编写的脚本 我尝试过 runscript geteval 没有任何效果 由于 Selenium 是用 JavaScript 编写的 因此 window 对象会移
  • 如何找到我的 typescript/react 模块的声明?

    我对前端技术非常 非常 陌生 特别是 React 和 TypeScript 当尝试做一件简单的事情 即使用反应组件时 我的问题出现了https github com ckeditor ckeditor5 https github com c

随机推荐

  • 推送通知未注册到 iOS 13 上的应用程序

    我构建了我的应用程序并在其中放置了一个断点didRegisterForRemoteNotificationsWithDeviceToken但它没有被触发 它在其他版本的 iOS 上运行良好 这是 iOS 13 中的错误还是我错过了 iOS
  • HTML:相对于图像的中心图像标题?

    我想编写 HTML 来对齐图像标题相对于图像的中心 我想对齐图片和标题在一起向左转 无论包含元素的宽度如何 这都应该是正确的 这是我到目前为止所拥有的 unknown containing element div style text al
  • Ubuntu DEB 安装程序使所有 Java 应用程序具有相同的图标

    我已经为基于 Debian 的系统创建了 Java 应用程序的 DEB 安装程序 在我的 DEB 包中 我使用 desktop 文件 如下所示 Desktop Entry Encoding UTF 8 Version version Typ
  • SAP JCo 使用 Java 在 SAP 系统中创建记录

    我正在尝试使用从 ABAP 获得的功能和结构在 SAP 系统中创建一个条目 我指的是这个链接在 SAP 中创建采购信息记录 https stackoverflow com questions 8534602 creating purchas
  • 收到“错误”:“未知的身份验证策略\“jwt \””

    我正在使用 Express Mongoose Passport 和 JWT 实现授权功能 我可以正常注册用户 我能够验证并生成 JWT 我可以在 JWT 站点上解析它 但由于某种原因 我收到未知的身份验证策略错误消息 我将所有代码块放在 P
  • 使用 pysam.TabixFile 注释读取的 Python 脚本中的处理速度振荡

    最初的问题 我正在用 python 3 5 编写一个生物信息学脚本 它解析一个大的 排序和索引的 bam https samtools github io hts specs SAMv1 pdf表示在基因组上对齐的测序读数的文件 将基因组信
  • Spring MVC 3.0 基本身份验证实现

    我目前正在使用 ASP NET 的 Spring MVC 框架将我的 Web 应用程序转换为 Java 不过学习它的好方法 我需要在我的应用程序中实现身份验证 请告诉我我的方法是否足够好和专业 以及如果不是 最好的做法是什么 首先 我正在编
  • TypeScript 传递导入 ES 库

    我想确保我的代码不使用比 ES6 更新的库功能 因此 我的tsconfig json看起来像这样 compilerOptions lib es6 target es6 outDir dist rootDir src module commo
  • 使用 st_buffer 围绕一个地理点画圈

    我想使用都柏林机场周围 110 NM 海里 绘制一个圆sf包裹 稍后我将通过st intersect带有来自 ADS B 的飞行位置报告 我为 NM 定义了一个新单位 如下所示 library units library tidyverse
  • mysql错误1064

    我正在尝试使用以下代码创建一个表 CREATE TABLE IF NOT EXISTS entries id int 10 NOT NULL auto increment atom id varchar 512 NOT NULL title
  • 是否可以在 docker hub 的自动构建中添加环境变量?

    我想自动化我的构建过程 并且需要传递一个环境变量来运行Dockerfile 我想知道在 Dockerhub 中是否有任何方法可以做到这一点 我知道 docker cloud 有类似的东西 但我想知道 Dockerhub 中是否有这个功能 因
  • Swift-Mailer 错误,“给定邮箱中的地址 [] 不符合 RFC”

    我构建了一个简单的 PHP 联系表单 该表单应该通过 Swiftmailer 脚本发送邮件 问题是我不断收到此错误 未捕获的异常 Swift RfcComplianceException 与 message 给定邮箱中的地址 不符合 RFC
  • MySQL C++ 连接器使用 SELECT 查询获取字符串

    我是 C 上的 mysql 新手 之前在 PAWN 上做过 效果很好 但现在我遇到了问题 我正在尝试从 mysql 数据库获取密码 稍后再执行其余代码 然后我会得到十六进制代码 如果是的话 这是我得到的示例 0x59fcb0 当我重新启动程
  • “缺少可链接的主机!”为设计

    我安装了 Devise 但每当我尝试创建帐户时 事情似乎都会停止 完整的错误如下 Missing host to link to Please provide host parameter or set default url option
  • 使用Delphi Dll和一些问题

    我想使用Delphi制作的dll 它有这个功能 函数 CryptStr str Key AnsiString DecryptStr boolean AnsiString 标准调用 我将 Dll 复制到 bin debug 和应用程序根目录中
  • vb.NET 将 JSON 列表反序列化为对象

    我还没有找到我正在寻找的确切答案 所以我想我会尝试提出这个问题 我目前正在尝试使用 Json NET 将 JSON 字符串反序列化为 vb NET 中的对象 我之前已经通过设置适当的类 然后使用父类将字符串反序列化为对象来完成了一些工作 并
  • 您如何在网络上搜索与编程相关的信息? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 使用 NoSQL 文档存储数据库有哪些实际用例?

    在过去的几天里 我一直在阅读文档并观看特定于 Mongo DB 的截屏视频 我不知道像这样的解决方案何时会比典型的 pg 或 mysql 环境更好 具体来说 我的问题是在什么情况下 有用例就很好 你会选择 nosql 路线 Thanks 许
  • 如何为材料表与单元格内的下拉菜单设置正确的绑定?

    我目前有一个角度材料表 它从我拥有的 api 端点返回值 目前 它返回正确的值 但我有选择下拉列表的单元格除外 这是我的材料表选择下拉列表的片段 div class matTable container div
  • 嵌入 YouTube 播放列表插件,侧边栏列表可见

    我知道 YouTube API 目前不提供显示类似于原生 YouTube 播放列表的播放列表侧边栏的功能 通过搜索 我找到了一个有前途的插件来模仿这种行为 https github com jakiestfu Youtube TV http