轻松上手,快乐学习!

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/tgbNymZ7vqY">
</iframe>
亲自试一试 »

YouTube Autoplay + Mute

您可以通过在 YouTube URL 上添加 autoplay=1 来让视频在用户访问页面时自动开始播放。但是,自动开始播放视频会让您的访问者感到烦恼!

注释: 在大多数情况下,Chromium 浏览器都不允许自动播放。但始终允许静音自动播放。

Chrome 在2018年增加了更严格的自动播放政策。Chromium 浏览器不允许在所有情况下自动播放。但是,始终允许静音自动播放。

autoplay=1 之后添加 mute=1,可让您的视频自动开始播放(但已静音)。

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?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/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
亲自试一试 »

YouTube Controls

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

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

值 1(默认):播放器控件显示。

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
亲自试一试 »