AMP
  • 網站

amp-youtube

簡介

使用 amp-youtube 將 YouTube 影片嵌入到您的 AMP HTML 檔案中。

設定

匯入 amp-youtube 元件

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

基本用法

透過影片 ID 嵌入 YouTube 影片。ID 可以在每個 YouTube 影片頁面網址中找到。

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

自動播放

設定 autoplay 將在 支援的瀏覽器上,於 YouTube 影片捲動進入/離開檢視畫面時自動播放/暫停。

YouTube 影片在自動播放開始前會自動靜音,當使用者點擊影片時,影片會取消靜音。

如果使用者已與 YouTube 影片互動 (例如:靜音/取消靜音、暫停/繼續等),且影片捲動進入或離開檢視畫面,則影片的狀態會保持使用者離開時的狀態。

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

自訂參數

所有 data-param-* 屬性都將作為查詢參數新增至 YouTube iframe src。這可用於將自訂值傳遞到 YouTube 外掛程式,例如是否顯示控制項,例如設定 relmodestbranding 選項。

<amp-youtube width="480" height="270" layout="responsive" data-param-modestbranding="1" data-param-rel="1" data-videoid="lBTCB7yLs8Y">
</amp-youtube>
需要進一步說明嗎?

如果此頁面上的說明沒有涵蓋您的所有問題,請隨時與其他 AMP 使用者聯繫,討論您的確切使用案例。

前往 Stack Overflow
未說明的特色功能?

AMP 專案非常鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,但我們也歡迎您針對您特別關注的問題做出一次性的貢獻。

在 GitHub 上編輯範例