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 驅動的豐富媒體嵌入內容。為任何其他 URL 顯示 URL 預覽作為摘要卡。
<amp-iframely> 透過第三方供應商 Iframely.com 嵌入內容。它不應與直接嵌入任何 URL 的 <amp-iframe> 混淆。
| 必要指令碼 | <script async custom-element="amp-iframely" src="https://cdn.ampproject.org/v0/amp-iframely-0.1.js"></script> |
| 支援的版面配置 | responsive、fixed-height |
總覽
amp-iframely 將您連接到 Iframely 雲端服務。它為超過 1900 家第三方發行商提供回應式嵌入程式碼和豐富媒體支援。此外，也為網際網路上的其他內容提供摘要卡作為 URL 預覽。
您可能會從 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 金鑰嘗試任何 URL。但是，它僅限於在 amp.dev 上使用。
屬性
識別
有兩種方法可以識別豐富媒體。可以透過 Iframely 發行的 ID，或透過媒體 URL 和您的 API 金鑰配對（為了安全起見，已進行 MD5 雜湊處理）
| data-id | Iframely 內容 ID（如果有的話） |
| data-url | 或者，如果沒有內容 ID，請透過其標準 URL 識別豐富媒體。 |
| data-key | 如果使用 |
放置
amp-iframely 支援 responsive 和 fixed-height 版面配置
| width 和 height | 針對回應式媒體，同時使用這兩個屬性來定義其長寬比。針對 fixed-height 版面配置，僅使用 height。如果您沒有媒體尺寸，請使用最適合作為預留位置的尺寸，並如下所示新增 resizable。 |
| resizable | 一個標記，用於新增事件監聽器並自動調整元件的高度，以符合和匹配豐富媒體內容。這適用於 responsive 和 fixed-height 版面配置。 |
| 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