AMP教學-iframe元件
BY kate │
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有以下要點:
- amp-iframe 不能放離頂部太近，必須離頂部600px或不占總視窗的75%，以較小者為準
- 默認情況下，amp-iframe 會具有沙盒屬性
- amp-iframe只能透過https或srcdoc屬性請求資源
- 不得使用於展示廣告為目的，但可以用於顯示影片，影片部分是廣告可允許。如果有廣告請使用 amp-ad 元件
amp-iframe可以崁入 youtube影片嗎? 可以，但是不能放入 autoplay (自動播放)之類的設定，並且載入速度也較慢，建議還是使用amp-youtube 元件，才能達到影片效果。
