AMP教學-iframe元件

AMP教學-iframe元件

AMP不支援任何iframe的語法,因此如果想要崁入其他網站的畫面時必須使用特定的iframe語法,常見的iframe使用如google地圖、影片崁入、圖像崁入等。
而如果要使用youtube影片崁入fb區塊崁入等,建議要使用另外專屬的語法,才能達到最佳效果

如慣例的,必須先加入js檔案
載入js檔案

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

以google地圖為例,要崁入地圖時同樣至google地圖點選"分享" 可以獲取一段程式碼,擷取src內的網址,貼到<amp-iframe>裡面即可

在html中貼上語法

<amp-iframe width="600"
height="400"
title="Google map pin on Googleplex, Mountain View CA"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848"></amp-iframe>

同樣必須加入寬、高、響應式語法


iframe語法統整

語法 作用
title="標題" 標題
sandbox="allow-scripts allow-same-origin allow-popups" 沙盒,必須設置此屬性才能讓iframe的js檔案運作。
allow-scripts 運行js檔案
allow-same-origin 運行部分原始程式,或是紀錄寫入 cookies
allow-popups 允許從iframe打開新視窗
關於內容詳解請見此
frameborder="0" iframe的邊框寬度
allowfullscreen 滿版符合螢幕寬度或外框,沒有值可使用
resizable 自動調整大小
必須在amp-iframe內放入一個帶有 overflow的子元素,
適合點選iframe內按鈕後展開iframe 範例
src="連結網址.." 要載入內容的連結網址

 

注意事項
避免amp頁面中只放了一個ifrme內容或影片,使用iframe有以下要點:

  1. amp-iframe 不能放離頂部太近,必須離頂部600px或不占總視窗的75%,以較小者為準
  2. 默認情況下,amp-iframe 會具有沙盒屬性
  3. amp-iframe只能透過https或srcdoc屬性請求資源
  4. 不得使用於展示廣告為目的,但可以用於顯示影片,影片部分是廣告可允許。如果有廣告請使用 amp-ad 元件

amp-iframe可以崁入 youtube影片嗎? 可以,但是不能放入 autoplay (自動播放)之類的設定,並且載入速度也較慢,建議還是使用amp-youtube 元件,才能達到影片效果。

參考:amp-iframe元件
amp-iframe說明文件

文章關鍵字:AMP AMP教學 AMP網頁 行動裝置

更多文章:

  1. AMP教學-amp-img圖片
  2. AMP教學-amp-carousel 輪播
  3. AMP教學-amp-instagram把IG照片放入文章中
  4. AMP的現況與未來趨勢
  5. AMP的SEO效果到底如何?