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> |
支持的布局 | 响应式,固定高度 |
概述
amp-iframely
将您连接到 Iframely 云服务。它为 1900 多个第三方发布商提供响应式嵌入代码和富媒体支持。此外,还为互联网上的其余内容提供 URL 预览作为摘要卡片。
您很可能会获得由 Iframely API 生成的 amp-iframely
代码。但您也可以跳过进行 API 调用,直接在 AMP 中使用 Iframely(我们建议在这种情况下使用响应式布局,并设置 resizable 标志)。
请在 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
支持响应式和固定高度布局
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