PHP MySQL jquery HTML CSS
HTML 基础教程 HTML XHTML HTML 表单 HTML 图形 HTML5 HTML API 参考手册 HTML 标签
HTML 简介 HTML 编辑器 基本的 HTML 标签 - 四个实例 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 文本格式化 HTML 引用 HTML 注释 HTML 颜色 HTML 颜色名 HTML 链接 HTML 图像 HTML 表格 HTML 列表 HTML 块元素和行内元素 HTML 类 HTML id 属性 HTML Iframe HTML JavaScript HTML 文件路径 HTML 头部元素 HTML 布局 HTML 响应式 Web 设计 HTML 计算机代码元素 HTML 字符实体 HTML 符号 在 HTML 中使用表情符号 HTML 编码（字符集） HTML 统一资源定位器 HTML 框架 HTML 背景 HTML URL 字符编码 HTML Web Server HTML <!DOCTYPE> HTML 快速参考 XHTML 简介 XHTML - 元素 XHTML - 属性 HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML Input 属性 HTML Input form* 属性 HTML 5 Canvas vs. SVG HTML 多媒体 HTML 插件 HTML 音频 HTML 视频 HTML YouTube 视频 HTML5 新元素 HTML5 迁移 HTML 实例 HTML 测验 你已经将 HTML 教程学习完毕，下一步该学习什么呢？ HTML 标签参考手册 - 功能排序 HTML 参考手册 - 浏览器支持 HTML 全局属性 HTML 事件参考手册 HTML 颜色名 HTML Canvas 参考手册 HTML Audio/Video DOM 参考手册 HTML 字符集 HTML &lt;!DOCTYPE&gt; HTML URL 编码参考手册 HTML 语言代码参考手册 HTML ISO 国家/地区代码参考手册 HTML 状态消息 HTML 请求方法 键盘快捷键

HTML 基础教程

HTML 简介 HTML 编辑器 基本的 HTML 标签 - 四个实例 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 文本格式化 HTML 引用 HTML 注释 HTML 颜色 HTML 颜色名 HTML 链接 HTML 图像 HTML 表格 HTML 列表 HTML 块元素和行内元素 HTML 类 HTML id 属性 HTML Iframe HTML JavaScript HTML 文件路径 HTML 头部元素 HTML 布局 HTML 响应式 Web 设计 HTML 计算机代码元素 HTML 字符实体 HTML 符号 在 HTML 中使用表情符号 HTML 编码（字符集） HTML 统一资源定位器 HTML 框架 HTML 背景 HTML URL 字符编码 HTML Web Server HTML <!DOCTYPE> HTML 快速参考

HTML XHTML

XHTML 简介 XHTML - 元素 XHTML - 属性

HTML 表单

HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML Input 属性 HTML Input form* 属性

HTML 图形

HTML 5 Canvas vs. SVG

HTML5

HTML 多媒体 HTML 插件 HTML 音频 HTML 视频 HTML YouTube 视频

HTML API

HTML5 新元素 HTML5 迁移

参考手册

HTML 标签

HTML 实例 HTML 测验 你已经将 HTML 教程学习完毕，下一步该学习什么呢？ HTML 标签参考手册 - 功能排序 HTML 参考手册 - 浏览器支持 HTML 全局属性 HTML 事件参考手册 HTML 颜色名 HTML Canvas 参考手册 HTML Audio/Video DOM 参考手册 HTML 字符集 HTML &lt;!DOCTYPE&gt; HTML URL 编码参考手册 HTML 语言代码参考手册 HTML ISO 国家/地区代码参考手册 HTML 状态消息 HTML 请求方法 键盘快捷键
首页 > 大前端 > HTML >HTML教程

HTML教程

收藏
分享
浏览5740
更新时间2025-07-15
HTML 视频

在 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>

运行实例 »

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>

运行实例 »

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>

运行实例 »

YouTube 控件

添加 controls=0 会使视频播放器不显示控件。

值 0：播放器控件不显示。

值 1（默认）：播放器控件显示。

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>

运行实例 »

HTML 视频

相关视频

更多

免费

前端入门_HTML5
初级前端入门_HTML5

65.1万次学习

收藏

免费

30分钟学会网站布局
初级30分钟学会网站布局

24.6万次学习

收藏

免费

CSS视频教程-玉女心经版
初级CSS视频教程-玉女心经版

41.3万次学习

收藏

免费

JavaScript极速入门_玉女心经系列
初级JavaScript极速入门_玉女心经系列

76.8万次学习

收藏

科技资讯

更多
华为nova 16 Pro泡泡玛特Hirono小野联名款礼盒发布，售价3899元
小佩Ai全自动猫厕所ULTRA，省事、更省心
Kratos v2.9.2 发布：Consul 标签与 metadata 修复
Kratos v3 迁移说明明确 Go 1.25 与 slog 改动
Kratos v3.0.0 新增 HTTP 流式与错误能力
Kratos v3 文档更新：Core 与 Contrib 边界更清晰
Kratos v3.0.0 发布：核心模块进入 v3 路径
vivo国内首款eSIM手机首销仪式在京举行
上班暂停 摸鱼时间到!支付宝推出摸鱼辅助系统《鱼来》

24小时阅读榜

更多

1

ThinkPHP Service里读取config配置怎么写

2

Slim4和Lumen的微服务框架选哪个好

3

PHP7.4 访问 Ollama 出现跨域报错怎么处理

4

ThinkPHP路由闭包怎么注入容器对象

5

PHP函数使用技巧:新手入门基础配置保姆级教程

6

ThinkPHP5.1.41安装后怎么开启类映射缓存？

7

ThinkPHP invokeFunction和invokeClass区别是什么

8

ThinkPHP5.1 模型 belongsTo 关联，外键命名不匹配查询不到数据修复

9

PHP 项目 git 钩子 php-cs-fixer，提交前自动格式化代码规范

10

PHP8.0 字符串转浮点数，带逗号千分位字符串转换失败怎么处理

11

Laravel11 验证请求 rule 数组，嵌套数组字段校验怎么编写规则

12

FrankenPHP 开启 Gzip 压缩优化 Symfony 页面加载

13

Symfony 表单文件 MIME 校验 FrankenPHP 绕过防护

14

FreeRTOS系统下C++面向对象编程内存怎么分配

15

PHP7.2PHP 慢日志 slowlog 只记录超时请求，如何增加采样记录全部请求

精品课程

更多
PHP实战天龙八部之微信支付视频教程
PHP实战天龙八部之微信支付视频教程

共5课时

18.1万人学习

PHP实战天龙八部之仿爱奇艺电影网站
PHP实战天龙八部之仿爱奇艺电影网站

共49课时

82.3万人学习

前端入门_HTML5
前端入门_HTML5

共29课时

65.1万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

41.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76.8万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

64.2万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.4万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

36.3万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

133.6万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7，16种组合，超全大合集

下载
vc9-vc14（32+64位）运行库合集（链接在下方）
vc9-vc14（32+64位）运行库合集（链接在下方）

phpStudy安装所需运行库集合下载

下载
VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载
VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载
php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载
VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载
SublimeText3汉化版
SublimeText3汉化版

中文版，非常好用

下载
Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载
phpStudy V8.1（Win64位）（已支持php8）
phpStudy V8.1（Win64位）（已支持php8）

Win64位，支持php多版本共存

下载
提交