HTML中如何嵌入YouTube视频-html教程-PHP中文网

HTML中如何嵌入YouTube视频

小老鼠

发布： 2025-08-30 15:59:01

原创

1124人浏览过

使用YouTube提供的iframe代码可轻松嵌入视频，通过CSS宽高比盒子实现响应式显示，并利用URL参数控制播放行为，注意解决自动播放限制、性能优化及无障碍性问题。

html中如何嵌入youtube视频

要在HTML中嵌入YouTube视频，最直接且推荐的方法是使用YouTube提供的

<iframe>

登录后复制

嵌入代码。这就像在你的网页里开了一个小窗口，直接播放YouTube上的内容，省去了你自己处理视频播放器和各种兼容性的麻烦。

解决方案

当你想要把一个YouTube视频放到自己的网页上时，你不需要从头开始写一个视频播放器。YouTube已经为你准备好了一切。

首先，你需要找到你想嵌入的视频。在YouTube上打开这个视频，然后找到视频下方的“分享”按钮（通常是一个向右的箭头图标）。点击它，会弹出一个分享选项框。在这个框里，你会看到一个“嵌入”选项（通常是一个

< >

登录后复制

符号）。点击“嵌入”，YouTube会立即为你生成一段HTML代码。

这段代码看起来会是这样的：

立即学习“前端免费学习笔记（深入）”；

<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/YOUR_VIDEO_ID&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; allowfullscreen></iframe>

登录后复制

你只需要将这段代码复制，然后粘贴到你HTML文件里你希望视频出现的位置即可。

这段代码里的几个关键属性值得注意：

```
width
```
登录后复制
和
```
height
```
登录后复制
: 定义了视频播放器的宽度和高度。你可以根据需要调整它们。
```
src
```
登录后复制
: 这是最重要的部分，它指向了YouTube视频的嵌入URL。
```
YOUR_VIDEO_ID
```
登录后复制
就是你视频的唯一标识符。
```
frameborder=&quot;0&quot;
```
登录后复制
: 移除了
```
<iframe>
```
登录后复制
周围的边框，让视频看起来更融入页面。
```
allow
```
登录后复制
: 这是一个安全属性，允许
```
<iframe>
```
登录后复制
使用某些浏览器功能，比如加速计、自动播放、剪贴板写入等。
```
allowfullscreen
```
登录后复制
: 允许用户将视频全屏播放。这对于用户体验来说非常重要。

就这样，几行代码就能搞定视频嵌入，非常方便。

如何让嵌入的YouTube视频在不同设备上自适应显示？

说实话，直接用YouTube给的固定

width

登录后复制

和

height

登录后复制

在响应式设计上是个老大难问题。手机上看可能挤成一团，电脑上看又太小。我个人习惯的做法是利用CSS的“宽高比盒子”（aspect ratio box）技巧来解决这个问题。这个方法能确保视频无论在什么屏幕尺寸下，都能保持正确的宽高比，并且填满父容器的宽度。

核心思路是这样的：

用一个父容器包裹
```
<iframe>
```
登录后复制
。
给父容器设置
```
position: relative;
```
登录后复制
。
利用
```
padding-bottom
```
登录后复制
来创建宽高比。对于16:9的视频，
```
padding-bottom
```
登录后复制
通常是
```
56.25%
```
登录后复制
（9除以16）。
把
```
<iframe>
```
登录后复制
本身设置成
```
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
```
登录后复制
，让它完全覆盖父容器。

下面是一个具体的CSS和HTML示例：

<div class="video-responsive">
    <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder=&quot;0&quot; allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

登录后复制

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例 (9 / 16 = 0.5625) */
    padding-top: 25px; /* 可选，防止内容被浏览器控件遮挡，如果视频有播放器控制条 */
    height: 0;
    overflow: hidden; /* 确保内容不会溢出 */
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

登录后复制

这样一来，你的YouTube视频就能优雅地适应各种屏幕尺寸了。我发现这比用JavaScript动态调整尺寸要稳定得多，也更符合CSS本身的逻辑。

Waymark

Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。

查看详情

嵌入YouTube视频时，有哪些常见的参数可以控制播放行为？

YouTube的嵌入URL不仅仅是视频ID那么简单，你可以在

src

登录后复制

属性的URL后面添加一些查询参数（query parameters），来精细控制视频的播放行为。这在我需要自定义用户体验时非常有用，比如我希望视频一加载就自动播放，或者隐藏一些YouTube的品牌信息。

这些参数通过

登录后复制

或

登录后复制

连接在视频URL的末尾，例如：

https://www.youtube.com/embed/YOUR_VIDEO_ID?autoplay=1&controls=0

登录后复制

。

几个我经常用的参数：

autoplay=1
登录后复制
: 尝试让视频自动播放。但要注意，现代浏览器（尤其是Chrome）对自动播放有严格的策略，通常要求视频是静音的（
```
muted=1
```
登录后复制
）或者用户有交互行为，否则可能不会自动播放。
controls=0
登录后复制
: 隐藏视频播放器控件。如果你想自己设计一套播放器UI，或者只是想展示一个背景视频，这个参数就很有用。
rel=0
登录后复制
: 当视频播放结束后，不显示相关视频推荐。这可以避免用户被其他视频分散注意力，保持在你的网站上。
modestbranding=1
登录后复制
: 减少YouTube播放器中的品牌信息，让播放器看起来更简洁。
loop=1
登录后复制
: 让视频循环播放。如果配合
```
playlist
```
登录后复制
参数，可以循环播放一个视频或一个列表。
playlist=YOUR_VIDEO_ID
登录后复制
: 搭配
```
loop=1
```
登录后复制
使用，让单个视频循环播放。如果没有这个参数，
```
loop=1
```
登录后复制
可能只在播放列表场景下生效。

举个例子，如果你想让一个视频自动播放、静音、不显示控件且不推荐相关视频，你的

src

登录后复制

会是这样：

https://www.youtube.com/embed/YOUR_VIDEO_ID?autoplay=1&mute=1&controls=0&rel=0

登录后复制

记住，

autoplay

登录后复制

和

mute

登录后复制

经常需要一起使用才能绕过浏览器的自动播放限制。

嵌入YouTube视频可能会遇到哪些常见问题，以及如何解决？

虽然嵌入YouTube视频通常很简单，但实际操作中还是会遇到一些小麻烦。我总结了一些常见的问题和我的解决办法：

视频无法显示或显示空白
- 检查
  src
  登录后复制
  URL: 这是最常见的问题。确保
```
src
```
  登录后复制
  属性中的URL是正确的YouTube嵌入URL（
```
https://www.youtube.com/embed/YOUR_VIDEO_ID
```
  登录后复制
  ），而不是普通的观看URL（
```
https://www.youtube.com/watch?v=YOUR_VIDEO_ID
```
  登录后复制
  ）。
- 检查
  width
  登录后复制
  和
  height
  登录后复制
  : 如果这两个属性设置为0或者太小，视频可能看起来是空白的。
- 网络问题或内容限制: 有些视频可能因为地区限制或版权问题无法在某些地方播放。这通常是你无法控制的，用户可能会看到YouTube的错误信息。
自动播放（Autoplay）不生效
- 浏览器策略: 现代浏览器（如Chrome、Firefox）为了改善用户体验，限制了视频的自动播放。通常，只有当视频是静音的（
```
mute=1
```
  登录后复制
  ）或者用户已经与页面有过交互时，才允许自动播放。
- 解决方案: 在
```
src
```
  登录后复制
  URL中同时添加
```
autoplay=1
```
  登录后复制
  和
```
mute=1
```
  登录后复制
  。如果仍不生效，可能是浏览器策略更严格，或者用户在浏览器设置中禁用了自动播放。
- 用户体验考量: 即使能自动播放，也要慎重使用。突然的视频播放可能会打扰用户，导致他们快速关闭页面。
页面加载性能下降
- <iframe>
  登录后复制
  的开销: 嵌入
```
<iframe>
```
  登录后复制
  会加载一个独立的文档，这会增加页面的请求数量和渲染时间。如果页面上有多个视频，性能问题会更明显。
- 解决方案：懒加载（Lazy Loading）:
  - 浏览器原生支持: 最简单的方法是给
```
<iframe>
```
    登录后复制
    添加
```
loading="lazy"
```
    登录后复制
    属性：
```
<iframe loading="lazy" ...></iframe>
```
    登录后复制
    。这会告诉浏览器只在用户即将滚动到视频区域时才加载它。
  - 自定义解决方案: 如果需要更精细的控制，可以先只显示一个视频的缩略图（通常YouTube会提供），当用户点击缩略图时，再动态地插入
```
<iframe>
```
    登录后复制
    代码。这需要一些JavaScript，但能显著提升初始加载速度。
无障碍性（Accessibility）问题
- 缺少
  title
  登录后复制
  属性:
```
<iframe>
```
  登录后复制
  如果没有
```
title
```
  登录后复制
  属性，屏幕阅读器可能无法向视障用户提供足够的信息。
- 解决方案: 始终为
```
<iframe>
```
  登录后复制
  添加一个描述性的
```
title
```
  登录后复制
  属性，例如：
```
<iframe title="我的YouTube视频：如何嵌入视频" ...></iframe>
```
  登录后复制
  。这能帮助所有用户更好地理解页面内容。