amp-youtube
簡介
使用 <a href="/documentation/components/amp-youtube/"><code>amp-youtube</code></a> 將 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 影片頁面 URL 中找到。
<amp-youtube width="480" height="270" layout="responsive" data-videoid="lBTCB7yLs8Y">
</amp-youtube>
自動播放
設定 <code>autoplay</code> 將在 <a href="https://caniuse.dev.org.tw/?search=autoplay">支援的瀏覽器</a> 上，於 YouTube 影片捲動進入/離開視窗時自動播放/暫停。
YouTube 影片在自動播放開始前會自動靜音，當使用者點擊影片時，影片會取消靜音。
如果使用者已與 YouTube 影片互動（例如，靜音/取消靜音、暫停/繼續等），且影片捲動進入或離開視窗，則影片的狀態會保持為使用者離開時的狀態。
<amp-youtube width="480" height="270" layout="responsive" data-videoid="lBTCB7yLs8Y" autoplay>
</amp-youtube>
自訂參數
所有 <code>data-param-*</code> 屬性都將作為查詢參數新增至 YouTube iframe src。這可用於將自訂值傳遞給 YouTube 外掛程式，例如是否顯示控制項，以設定 <code>rel</code> 或 <code>modestbranding</code> 選項。
<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 上編輯範例-