嵌入 YouTube 影片
YouTube 是目前全球最大的线上影音平台，这篇教学会介绍如何透过 HTML 的实作，将 YouTube 嵌入到网页中，在网页里就能播放 YouTube 影片或影片清单。
快速导览：
嵌入 YouTube 影片
前往 YouTube 寻找一部自己喜欢的影片，找到后点击下方的“分享”按钮。
点击后选择“嵌入”，也可勾选指定影片打开时间。
点击后会出现 YouTube 嵌入的程序码，点击“复制”就能复制全部的程序码，往下拉会有“显示播放器控制选项”( 是否出现播放器 ) 和“启用隐私权加强保护模式”，两个选项都使用默认值即可 ( 两个选项都可以透过程序码的属性修改 )。
复制程序码之后，打开自己的 HTML 文件，将程序码贴到 <body> 里，网页中就会出现嵌入的 YouTube 影片。
<iframe width="560"
height="315"
src="https://www.youtube.com/embed/WjJZufaOv3o"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
嵌入 YouTube 影片清单
前往 YouTube 寻找自己喜欢的影片清单，找到后进入影片清单，点击下方的“分享”按钮。
点击后选择“嵌入”。
复制程序码之后，打开自己的 HTML 文件，将程序码贴到 <body> 里，网页中就会出现嵌入的 YouTube 影片清单。
<iframe width="560"
height="315"
src="https://www.youtube.com/embed/videoseries?list=PL9ACDjBMkp9yt-ljgN_oGiEWBfUmxEQsW"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
YouTube iframe 属性说明
嵌入 YouTube 之后，可以透过 iframe 的属性设定 YouTube 影片，下方列出常用的属性与说明：
| 属性 | 说明 |
|---|---|
| width | 宽度 ( 可使用 CSS 取代 )。 |
| height | 高度 ( 可使用 CSS 取代 )。 |
| src | YouTube 影片网址，若网址从 youtube 为 youtube-nocookie 表示启用隐私权加强保护模式。 |
| title | YouTube 影片标题。 |
| frameborder | iframe 边框 ( 可使用 CSS 调整 )。 |
| allow | YouTube 影片默认允许的功能 ( 可移除 )。 |
| allowfullscreen | 是否允许全屏幕播放，移除则不能全屏幕播放。 |
直接在 YouTube src 网址后方加上对应参数，就能替嵌入的 YouTube 加上对应的功能，常用的参数和说明如下：
| 参数 | 说明 |
|---|---|
| start | 从第几秒开始播放 ( 正整数 )。 |
| autoplay | 0 不自动播放 ( 默认 )，1 自动播放。 |
| controls | 0 没有播放控制器，1 有播放控制器 ( 默认 )。 |
| disablekb | 0 停用键盘控制，1 启用键盘控制 ( 默认 )。 |
| end | 停止播放的时间 ( 正整数，从影片最开始 0 秒起算 )。 |
| loop | 0 不重复播放 ( 默认 )，1 重复播放。 |
| list | 影片清单 id。 |
| cc_load_policy | 0 关闭字幕 ( 默认 )，1 打开字幕。 |
| cc_lang_pref | 字幕语系，zh 中文，en 英文，参考 ISO 639-1 standard。 |
| color | 影片播放进度条颜色，red 红色 ( 默认 )，white 白色。 |
| fs | 0 隐藏全屏幕按钮，1 显示全屏幕按钮 ( 默认 )。 |
举例来说，下方的 HTML 嵌入的 YouTube，默认从 5 秒的位置开始，启用 loop 功能，停用全屏幕功能并隐藏全屏幕按钮 ( 第一个参数开头使用 ?，之后每个参数使用 & 分隔 )。
<iframe width="560"
height="315"
src="https://www.youtube.com/embed/WjJZufaOv3o?start=5&loop=1&fs=0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
微信扫码关注
抖音扫码关注