概述
- 示例：通过内容 ID 嵌入第三方
- 示例：通过 API 密钥获取任何 URL 的摘要卡片
属性
- 识别
- 放置
验证

amp-iframely

说明

显示 Iframely.com 提供支持的富媒体嵌入

必需脚本

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

支持的布局

fill fixed fixed-height flex-item responsive intrinsic

嵌入并显示 Iframely.com 提供支持的富媒体嵌入，来自 1900 多个第三方发布商。显示 URL 预览作为任何其他 URL 的摘要卡片。

<amp-iframely> 通过第三方供应商 Iframely.com 嵌入内容。它不应与 <amp-iframe> 混淆，后者直接嵌入任何 URL。

必需脚本	`<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>

在 playground 中打开此代码段

示例：通过 API 密钥获取任何 URL 的摘要卡片

<amp-iframely height="140"
    data-url="https://iframely.com"
    data-key="30ef29b325c50219755786a371c281ad"
    layout="fixed-height"
    resizable>
</amp-iframely>

在 playground 中打开此代码段

请随意使用上述示例中的 API 密钥尝试任何 URL。但是，它仅限于在 amp.dev 上使用。

属性

识别

有两种方法可以识别富媒体。一种是借助 Iframely 发行的 ID，另一种是使用媒体 URL 和您的 API 密钥（出于安全原因已进行 MD5 哈希处理）。

data-id	Iframely 内容 ID（如果可用）
data-url	或者，如果没有内容 ID，请通过其规范 URL 识别富媒体。
data-key	如果使用 `data-url`，还应将您的 Iframely API 密钥的 MD5 哈希值添加为 `data-key` 属性。对您的密钥进行哈希处理，未加密的值在此处不起作用。

放置

amp-iframely 支持响应式和固定高度布局

宽度和高度	对响应式媒体使用这两个属性来定义其纵横比。仅对固定高度布局使用高度。如果您没有媒体尺寸，请使用最适合作为占位符的内容，并按如下所示添加 `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