AMP教學-youtube元件

AMP教學-youtube元件
在寫部落格或是一些內容介紹時偶爾會需要崁入youtube影片來加以輔助內容,但在AMP頁面中,以往youtube提供的崁入語法是無法放在AMP網頁裡,因為這是外來的語法,會造成網頁無法快速的載入與錯誤。來看看如何將Youtube影片放入amp頁面中吧!

載入js檔案
首先同樣地先在<head>內載入js檔案
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

貼入html語法
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="lBTCB7yLs8Y"></amp-youtube>
注意 data-videoid="lBTCB7yLs8Y" 裡面貼的英數是影片的id,id可從網址處就可以截取到,=的後面這串英數。
youtube尋找id
上面有設寬高,但比較像是比例作用,因為有設定響應式 layout="responsive" 因此影片會依據外框縮放,假如不知道寬高要如何設定比例才對,可以在youtube介面點選"分享">崁入 ,查看裡面語法的寬高來當作依據。(但此段語法是無法放在AMP網頁內正常使用的,僅供參考寬高比例)
Youtube 圖片撈取尺寸

如果在html語法內加入了 autoplay ,就能讓影片自動和暫停播放。 一開始影片會是停止的,當瀏覽器的可視範圍看到該影片時,影片就會自動播放,但會維持靜音;如果瀏覽器的可視範圍離開該影片(例如往下移動,已經滑超過該影片),影片就會停止播放。 假如使用者點選影片時才會有聲音播放,但這時候即使瀏覽器的可視範圍離開該影片,影片也會繼續播放,除非自行點選停止鍵。


參考:
官方範例
amp-youtube文件

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播