Bento Embedly 卡片

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
    ></script>
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      bento-embedly-card {
        width: 375px;
        height: 710px;
      }
    </style>

</head>

<body>

    <bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
    </bento-embedly-key>
    <bento-embedly-card
      data-url="https://twitter.com/AMPhtml/status/1397995435386679302?s=20"
      data-card-theme="dark"
      data-card-controls="0"
    >
    </bento-embedly-card>

</body>

使用 Embedly 卡片提供响应式且可分享的内嵌

卡片是利用 Embedly 最简单的方法。对于任何媒体，卡片都提供响应式内嵌，并带有内置内嵌分析功能。

如果您有付费计划，请使用 <bento-embedly-key> 或 <BentoEmbedlyContext.Provider> 组件设置您的 API 密钥。您只需为每页设置一个 Bento Embedly 密钥，即可从卡片中移除 Embedly 的品牌。在您的页面中，您可以包含一个或多个 Bento Embedly 卡片实例。

将 bento-embedly-card 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

您必须包含每个 Bento 组件所需的 CSS 库，以保证正确加载，然后才能添加自定义样式。或使用内嵌的轻量级预升级样式。请参阅布局和样式。

通过 npm 导入

npm install @bentoproject/embedly-card

import {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';
defineBentoEmbedlyCard();

通过 `<script>` 包含

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css" crossorigin="anonymous">

示例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
    ></script>
    <style>
      bento-embedly-card {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<body>

<bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
    </bento-embedly-key>

    <bento-embedly-card
      data-url="https://twitter.com/AMPhtml/status/986750295077040128"
      data-card-theme="dark"
      data-card-controls="0"
    >
    </bento-embedly-card>

    <bento-embedly-card
      id="my-url"
      data-url="https://www.youtube.com/watch?v=LZcKdHinUhE"
    >
    </bento-embedly-card>

</body>

布局和样式

每个 Bento 组件都有一个小型 CSS 库，您必须包含该库，以保证正确加载，而不会出现内容偏移。由于基于顺序的特异性，您必须手动确保在任何自定义样式之前包含样式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
/>

或者，您还可以使轻量级预升级样式内嵌可用

<style>
  bento-embedly-card {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

容器类型

bento-embedly-card 组件具有已定义的布局大小类型。为确保组件正确渲染，请务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级（幻灯片）

bento-embedly-card {
  height: 100px;
  width: 100%;
}

属性

`data-url`

用于检索内嵌信息的 URL。

`data-card-embed`

指向视频或富媒体的 URL。与文章等静态内嵌一起使用，而不是在卡片中使用静态页面内容，卡片将内嵌视频或富媒体。

`data-card-image`

指向图像的 URL。指定当 data-url 指向文章时在文章卡片中使用哪张图像。并非所有图像 URL 都受支持，如果图像未加载，请尝试使用其他图像或域。

`data-card-controls`

启用分享图标。

0：禁用分享图标。
1：启用分享图标

默认值为 1。

`data-card-align`

对齐卡片。可能的值有 left、center 和 right。默认值为 center。

`data-card-recommend`

当支持推荐时，它会禁用视频和富卡片上的 embedly 推荐。这些推荐由 embedly 创建。

0：禁用 embedly 推荐。
1：启用 embedly 推荐。

默认值为 1。

`data-card-via`（可选）

指定卡片中的 via 内容。这是进行归因的好方法。

`data-card-theme`（可选）

允许设置 dark 主题，它会更改主卡片容器的背景颜色。使用 dark 设置此主题。对于深色背景，最好指定此主题。默认值为 light，它不会设置主卡片容器的背景颜色。

title（可选）

为组件定义一个 title 属性，以传播到底层的 <iframe> 元素。默认值为 "Embedly card"。

API 示例

以编程方式更改任何属性值，将自动更新元素。例如，通过更改 data-url 值，您可以切换到不同的嵌入

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
    ></script>
    <style>
      bento-embedly-card {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<body>

<bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
    </bento-embedly-key>

    <bento-embedly-card
      data-url="https://twitter.com/AMPhtml/status/986750295077040128"
      data-card-theme="dark"
      data-card-controls="0"
    >
    </bento-embedly-card>

    <bento-embedly-card
      id="my-url"
      data-url="https://www.youtube.com/watch?v=LZcKdHinUhE"
    >
    </bento-embedly-card>

    <div class="buttons" style="margin-top: 8px">
      <button id="change-url">Change embed</button>
    </div>

    <script>
      (async () => {
        const embedlyCard = document.querySelector('#my-url');
        await customElements.whenDefined('bento-embedly-card');

        // set up button actions
        document.querySelector('#change-url').onclick = () => {
          embedlyCard.setAttribute(
            'data-url',
            'https://www.youtube.com/watch?v=wcJSHR0US80'
          );
        };
      })();
    </script>

</body>

Preact/React 组件

通过 npm 导入

npm install @bentoproject/embedly-card

import {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';
import '@bentoproject/embedly-card/styles.css';

function App() {
  return (
    <BentoEmbedlyContext.Provider
      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}
    >
      <BentoEmbedlyCard url="https://www.youtube.com/watch?v=LZcKdHinUhE"></BentoEmbedlyCard>
    </BentoEmbedlyContext.Provider>
  );
}

布局和样式

容器类型

BentoEmbedlyCard 组件具有已定义的布局大小类型。为确保组件正确渲染，请务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级（幻灯片）。这些可以内联应用

<BentoEmbedlyCard
  style={{width: 300, height: 100}}
  url="https://www.youtube.com/watch?v=LZcKdHinUhE"
></BentoEmbedlyCard>

或通过 className

<BentoEmbedlyCard
  className="custom-styles"
  url="https://www.youtube.com/watch?v=LZcKdHinUhE"
></BentoEmbedlyCard>

.custom-styles {
  height: 100px;
  width: 100%;
}

属性

`url`

用于检索内嵌信息的 URL。

`cardEmbed`

指向视频或富媒体的 URL。与文章等静态内嵌一起使用，而不是在卡片中使用静态页面内容，卡片将内嵌视频或富媒体。

`cardImage`

指向图像的 URL。指定当 data-url 指向文章时在文章卡片中使用哪张图像。并非所有图像 URL 都受支持，如果图像未加载，请尝试使用其他图像或域。

`cardControls`

启用分享图标。

0：禁用分享图标。
1：启用分享图标

默认值为 1。

`cardAlign`

对齐卡片。可能的值有 left、center 和 right。默认值为 center。

`cardRecommend`

当支持推荐时，它会禁用视频和富卡片上的 embedly 推荐。这些推荐由 embedly 创建。

0：禁用 embedly 推荐。
1：启用 embedly 推荐。

默认值为 1。

`cardVia`（可选）

指定卡片中的 via 内容。这是进行归因的好方法。

`cardTheme`（可选）

title（可选）

为组件定义一个 title 属性，以传播到底层的 <iframe> 元素。默认值为 "Embedly card"。

Bento Embedly 卡片

<head>

<body>

Web 组件

通过 npm 导入

通过 <script> 包含

示例

<head>

<body>

布局和样式

容器类型

属性

data-url

data-card-embed

data-card-image

data-card-controls

data-card-align

data-card-recommend

data-card-via（可选）

data-card-theme（可选）

title（可选）

API 示例

<head>

<body>

Preact/React 组件

通过 npm 导入

布局和样式

容器类型

属性

url

cardEmbed

cardImage

cardControls

cardAlign

cardRecommend

cardVia（可选）

cardTheme（可选）

title（可选）

通过 `<script>` 包含

`data-url`

`data-card-embed`

`data-card-image`

`data-card-controls`

`data-card-align`

`data-card-recommend`

`data-card-via`（可选）

`data-card-theme`（可选）

`url`

`cardEmbed`

`cardImage`

`cardControls`

`cardAlign`

`cardRecommend`

`cardVia`（可选）

`cardTheme`（可选）