使用曲目列表导航嵌入YouTube视频

Question

我想在我的网站上嵌入一个YouTube视频，这是一张完整的音乐专辑，并创建一个曲目列表导航，以便用户可以点击专辑中的各个歌曲。

我知道嵌入YouTube iframe的基本方法：

<iframe width="420" height="315" src="https://www.youtube.com/embed/uRDgVEJKx5c" frameborder="0" allowfullscreen></iframe>

我如何创建导航？

Answer 1

首先，使用标准的YouTube iframe嵌入代码，然后添加名称属性：

示例：

<iframe name="iframeYouTube" width="560" height="315" src="https://www.youtube.com/embed/uRDgVEJKx5c" frameborder="0" allowfullscreen=""></iframe>

然后在同一页面上创建导航，其中包含指向YouTube视频中特定时间的深层链接。使用定位iframe名称的锚标记，并将一些查询字符串参数添加到YouTube嵌入网址：

• 开始设置为视频中的秒数
• 自动播放设置为true

示例：

<a target="iframeYouTube" href="https://www.youtube.com/embed/uRDgVEJKx5c?start=672&autoplay=1">Glorious Lion</a>

请参阅my CodePen example