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>

親自試一試