HTML YouTube 视频 详解
HTML YouTube 视频
在 HTML 中包含视频的最简单的方法是，使用 YouTube。
纠结视频格式？
将视频转换为不同的格式可能既困难又耗时。
一个更简单的解决方案是让 YouTube 在您的网页中播放视频。
YouTube Video Id
保存（或播放）视频时，YouTube 会显示一个 id（例如 ih1l6wb7LhU）。
您可以使用这个 id，并在 HTML 代码中引用您的视频。
在 HTML 中保费 YouTube 视频
如需在网页上播放视频，请执行以下操作：
- 将视频上传到 YouTube
- 记下视频 id
- 在您的网页中定义
<iframe>元素 - 让
src属性指向视频的 URL - 使用
width和height属性来规定播放器的尺寸 - 向 URL 添加其他参数（参阅下文）
示例代码：
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
YouTube Autoplay + Mute
您可以通过在 YouTube URL 上添加 autoplay=1 来让视频在用户访问页面时自动开始播放。但是，自动开始播放视频会让您的访问者感到烦恼！
注意：在大多数情况下，Chromium 浏览器都不允许自动播放。但始终允许静音自动播放。
在 autoplay=1 之后添加 mute=1，可让您的视频自动开始播放（但已静音）。
YouTube - Autoplay + Muted
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
YouTube Playlist
以逗号分隔的要播放的视频列表（原始 URL 除外）。
YouTube Loop
添加 loop=1 会让您的视频永远循环。
值 0（默认）：视频将播放一次。
值 1：视频将循环（永远）。
YouTube - Loop
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
YouTube Controls
添加 controls=0 会使视频播放器不显示控件。
值 0：播放器控件不显示。
值 1（默认）：播放器控件显示。
YouTube - Controls
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
