怎样在HTML中插入一个YouTube视频？视频嵌入教程-html教程-PHP中文网

怎样在HTML中插入一个YouTube视频？视频嵌入教程

星降

发布： 2025-08-15 17:00:02

原创

348人浏览过

要嵌入youtube视频并实现自定义控制和响应式布局，首先使用youtube提供的iframe代码并添加自定义参数，其次通过css实现响应式设计，最后利用youtube iframe player api添加自定义控件。1. 获取嵌入代码：在youtube视频下方点击“分享”→“嵌入”，复制显示的iframe代码。2. 粘贴到html中：将代码插入html文件的适当位置。3. 调整尺寸：修改iframe的width和height属性以改变视频大小。4. 添加参数：在src的url后通过?和&添加autoplay=1、loop=1、controls=0、start=n、mute=1等参数以实现自动播放、循环、隐藏控件、指定起始时间、静音等功能。5. 理解allow属性：allow属性指定iframe可使用的浏览器权限，如autoplay、accelerometer、clipboard-write、gyroscope、picture-in-picture等，allowfullscreen允许全屏播放。6. 实现响应式：用<div class="video-container">包裹iframe，并使用css设置padding-bottom:56.25%（16:9比例）或75%（4:3比例），结合position:absolute使iframe自适应容器。7. 添加自定义控件：引入youtube iframe player api脚本，创建带id的div容器，通过javascript初始化播放器，绑定onyoutubeiframeapiready函数，使用yt.player配置videoid、尺寸和事件回调，在onplayerready中为自定义按钮绑定playvideo()和pausevideo()等操作，实现播放/暂停功能。最终代码需确保video_id替换为实际视频id，且api正确加载。

怎样在HTML中插入一个YouTube视频？视频嵌入教程

在HTML中嵌入YouTube视频，其实就是利用YouTube提供的iframe代码，简单复制粘贴就能搞定。不过，想要更灵活地控制视频播放，还得了解一些参数设置。

解决方案

找到YouTube视频的嵌入代码： 在YouTube视频下方，点击“分享”按钮，然后选择“嵌入”。你会看到一段HTML代码，通常是以
```
<iframe>
```
登录后复制
标签开始的。

立即学习“前端免费学习笔记（深入）”；
复制嵌入代码： 完整复制这段代码。
粘贴到你的HTML文件中： 将复制的代码粘贴到你想要显示视频的位置。
调整尺寸（可选）：
```
<iframe>
```
登录后复制
标签中通常包含
```
width
```
登录后复制
和
```
height
```
登录后复制
属性，可以修改这些值来调整视频的显示大小。
自定义参数（可选）： 你还可以添加一些参数到
```
<iframe>
```
登录后复制
标签的
```
src
```
登录后复制
属性中，例如：
- ```
autoplay=1
```
  登录后复制
  ：自动播放视频（注意：某些浏览器可能会阻止自动播放）。
- ```
loop=1
```
  登录后复制
  ：循环播放视频。
- ```
controls=0
```
  登录后复制
  ：隐藏播放器控件。
- ```
start=N
```
  登录后复制
  ：从视频的第N秒开始播放。
- ```
mute=1
```
  登录后复制
  ：静音播放。
这些参数需要添加到
```
src
```
登录后复制
属性的URL后面，用
```
?
```
登录后复制
分隔第一个参数，用
```
&
```
登录后复制
分隔后续参数。例如：
```
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&loop=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
登录后复制
注意将
```
VIDEO_ID
```
登录后复制
替换成你实际的视频ID。

YouTube嵌入代码中的

allow

登录后复制

属性是什么意思？

allow

登录后复制

属性用于控制iframe中运行的视频可以使用的浏览器特性。例如，

accelerometer

登录后复制

允许视频访问设备的加速度计，

autoplay

登录后复制

允许自动播放，

clipboard-write

登录后复制

允许视频写入剪贴板，等等。

allowfullscreen

登录后复制

是最常见的，它允许用户全屏观看视频。没有它，全屏按钮可能不起作用。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

如何让嵌入的YouTube视频响应式？

让嵌入的YouTube视频响应式，意味着它会根据屏幕大小自动调整尺寸，避免在小屏幕上溢出。一个常用的方法是使用CSS来实现。

包裹
```
<iframe>
```
登录后复制
标签： 用一个
```
<div>
```
登录后复制
标签包裹
```
<iframe>
```
登录后复制
标签。

CSS样式： 添加以下CSS样式：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

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

登录后复制

HTML代码：
```
<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
```
登录后复制
这种方法的原理是利用
```
padding-bottom
```
登录后复制
属性来维持视频的宽高比，然后让
```
<iframe>
```
登录后复制
标签占据容器的全部空间。
```
56.25%
```
登录后复制
是16:9宽高比的高度百分比。如果你的视频是4:3的，那么这个值应该是
```
75%
```
登录后复制
。

如何在嵌入的YouTube视频上添加自定义控件？

虽然YouTube本身提供了播放器控件，但有时你可能想要添加自己的控件，例如自定义的播放/暂停按钮、音量滑块等。这需要使用YouTube IFrame Player API。

引入YouTube IFrame Player API： 在你的HTML文件中引入API脚本。
```
<script src="https://www.youtube.com/iframe_api"></script>
```
登录后复制
创建
```
<iframe>
```
登录后复制
标签： 创建一个
```
<iframe>
```
登录后复制
标签，并设置
```
id
```
登录后复制
属性。
```
<div id="player"></div>
```
登录后复制

编写JavaScript代码： 编写JavaScript代码来初始化播放器，并添加自定义控件。

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'VIDEO_ID',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  // 播放器准备就绪后的操作，例如绑定自定义控件
  document.getElementById('play-button').addEventListener('click', function() {
    player.playVideo();
  });

  document.getElementById('pause-button').addEventListener('click', function() {
    player.pauseVideo();
  });
}

function onPlayerStateChange(event) {
  // 播放器状态改变时的操作
  if (event.data == YT.PlayerState.PLAYING) {
    console.log('视频正在播放');
  }
}

登录后复制

添加自定义控件： 在HTML中添加自定义控件。
```
<button id="play-button">播放</button>
<button id="pause-button">暂停</button>
```
登录后复制
这种方法的关键在于使用YouTube IFrame Player API来控制播放器，并监听播放器的事件，以便在播放器状态改变时执行相应的操作。记得替换
```
VIDEO_ID
```
登录后复制
为你的视频ID。