重要事項：本文件不適用於您目前選取的格式 電子郵件！
amp-iframely
說明
顯示 Iframely.com 支援的複合媒體嵌入內容
必要指令碼
<script async custom-element="amp-iframely" src="https://cdn.ampproject.org/v0/amp-iframely-0.1.js"></script>
從超過 1900 家第三方發佈商嵌入及顯示 Iframely.com 支援的複合媒體嵌入內容。針對任何其他網址，以摘要卡的形式顯示網址預覽。
<amp-iframely> 透過第三方廠商 Iframely.com 嵌入內容。這不應與 <amp-iframe> 混淆，後者會直接嵌入任何網址。
| 必要指令碼 | <script async custom-element="amp-iframely" src="https://cdn.ampproject.org/v0/amp-iframely-0.1.js"></script> |
| 支援的版面配置 | 自適應、固定高度 |
總覽
amp-iframely 將您連線至 Iframely 雲端服務。它為超過 1900 家第三方發佈商提供自適應嵌入程式碼和複合媒體支援。此外，也為網際網路上的其他內容提供摘要卡作為網址預覽。
您可能會從 Iframely API 取得產生的 amp-iframely 程式碼。但您也可以略過發出 API 呼叫的步驟，直接在 AMP 中使用 Iframely (在這種情況下，我們建議使用自適應版面配置和可調整大小標記)。
請在 iframely.com 取得您的 API 金鑰。
範例：透過內容 ID 嵌入第三方內容
<amp-iframely width="400" height="225" data-id="I8NNa1s" layout="responsive" data-img> </amp-iframely>
範例：透過 API 金鑰取得任何 URL 的摘要卡
<amp-iframely height="140" data-url="https://iframely.com" data-key="30ef29b325c50219755786a371c281ad" layout="fixed-height" resizable> </amp-iframely>
歡迎使用上述範例中的 API 金鑰嘗試任何網址。不過，該金鑰僅限在 amp.dev 上使用。
屬性
識別
有兩種方式可以識別複合媒體。您可以透過 Iframely 發出的 ID，或透過一組媒體網址和您的 API 金鑰 (基於安全考量，採用 MD5 雜湊處理)。
| data-id | Iframely 內容 ID (如有) |
| data-url | 或者，如果沒有內容 ID，請透過複合媒體的標準網址加以識別。 |
| data-key | 如果使用 |
放置
amp-iframely 支援自適應和固定高度版面配置
| width 和 height | 針對自適應媒體，同時使用這兩個屬性來定義其長寬比。針對固定高度版面配置，則僅使用 height。如果您沒有媒體尺寸，請使用最適合做為預留位置的尺寸，並如下所示新增 resizable。 |
| resizable | 這個標記可用於新增事件監聽器，並自動調整元件的高度，以符合及配合複合媒體內容。這適用於自適應和固定高度版面配置。 |
| data-img | 空屬性，表示在元件及其內容載入時，應使用複合媒體的縮圖做為預留位置。請勿提供值 - Iframely 會自行尋找所需的圖片位址。 |
Iframely 查詢字串 API 參數 的任何其他參數，都可以做為加上 data- 前置字串的屬性傳遞。例如，align="left" API 參數會變成 data-align="left" 屬性。自訂的 供應商專屬選項 也可以做為 data- 屬性傳遞。
驗證
至少需要 data-id 屬性，或一組 data-url 和 data-key，才能識別第三方複合媒體內容並向 Iframely 驗證身分。
您已將本文件讀過十幾遍，但還是沒有解答您的所有疑問嗎？或許其他人也有相同的感受：請在 Stack Overflow 上與他們聯絡。
前往 Stack Overflow 發現錯誤或缺少功能？AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，同時也歡迎您針對自己特別關注的問題提供一次性的貢獻。
前往 GitHub