amp-youtube

1.0 0.1

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

用法

顯示 YouTube 影片。

使用 responsive 版面配置時，範例中的寬度和高度應能為 16:9 長寬比的影片產生正確的版面配置

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270"
></amp-youtube>

<amp-youtube
  id="myLiveChannel"
  data-live-channelid="UCB8Kb4pxYzsDsHxzBfnid4Q"
  width="358"
  height="204"
  layout="responsive"
>
  <amp-img
    src="https://i.ytimg.com/vi/Wm1fWz-7nLQ/hqdefault_live.jpg"
    placeholder
    layout="fill"
  />
</amp-youtube>

屬性

autoplay

如果此屬性存在，且瀏覽器支援自動播放

• 影片會在自動播放開始前自動靜音
• 當影片捲動到視窗外時，影片會暫停
• 當影片捲動到視窗內時，影片會繼續播放
• 當使用者輕觸影片時，影片會取消靜音
• 如果使用者已與影片互動 (例如，靜音/取消靜音、暫停/繼續等)，且影片捲動到視窗內或外，影片的狀態會維持使用者離開時的狀態。例如，如果使用者暫停影片，然後將影片捲動到視窗外，再返回影片，影片仍會處於暫停狀態。

loop

如果此屬性存在，影片或播放清單會在結束後再次播放 (從頭開始)。

data-videoid

在每個 YouTube 影片頁面網址中找到的 YouTube 影片 ID。

例如，在此網址中：https://www.youtube.com/watch?v=Z1q71gFeRqM，Z1q71gFeRqM 是影片 ID。

data-live-channelid

提供穩定直播網址的 Youtube 頻道 ID。例如，在此網址中：https://www.youtube.com/embed/live_stream?channel=UCB8Kb4pxYzsDsHxzBfnid4Q，UCB8Kb4pxYzsDsHxzBfnid4Q 是頻道 ID。您可以提供 data-live-channelid 而非 data-videoid 屬性，以嵌入直播的穩定網址，而不是影片。頻道沒有預設預留位置。您可以為每個範例 2 上方的影片提供預留位置。

data-param-*

所有 data-param-* 屬性 (data-param-autoplay 和 data-param-loop 除外) 都會新增為 YouTube iframe src 的查詢參數。這可用於將自訂值傳遞至 YouTube 外掛程式，例如是否顯示控制項。

金鑰和值將會是 URI 編碼。金鑰將會是駝峰式命名

data-param-controls=1 會變成 &controls=1

如需 YouTube 的更多參數選項，請參閱 YouTube 嵌入式播放器參數。

dock

需要 amp-video-docking 元件。如果此屬性存在且影片是手動播放，當使用者將影片捲動到影片元件的可視區域外時，影片將會「最小化」並固定到角落或元素。

credentials (選填)

定義 Fetch API 指定的 credentials 選項。

• 支援的值：omit、include
• 預設值：include

如果您想要使用 隱私權加強模式的 YouTube 播放器，請傳遞值 omit。

通常，YouTube 會在載入播放器時設定 Cookie。在隱私權加強模式中，Cookie 會在使用者按一下播放器時設定。

title (選填)

為元件定義 title 屬性，以傳播到基礎 <iframe> 元素。預設值為 "YouTube 影片"。

通用屬性

此元素包含延伸至 AMP 元件的通用屬性。

驗證

請參閱 AMP 驗證器規格中的 amp-youtube 規則。