Displays an Embedly card.
<script async custom-element="amp-embedly-card" src="https://cdn.ampproject.org/v0/amp-embedly-card-1.0.js"></script>
<script async custom-element="amp-embedly-card" src="https://cdn.ampproject.org/v0/amp-embedly-card-1.0.js"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-embedly-card-1.0.css">
amp-embedly-card component provides you with responsive and shareable embeds to drive the reach of your websites,
blog posts, and articles from any URL using Embedly cards.
Cards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.
Example: Embedding multiple resources
If you have a paid plan, use the
amp-embedly-key component to set your api key.
You just need one
amp-embedly-key per AMP page.
<amp-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a" layout="nodisplay"> </amp-embedly-key>
If you are a paid user, setting the
amp-embedly-key tag removes Embedly's branding from the cards.
Within your AMP page, you can include one or multiple
<amp-embedly-card data-url="https://twitter.com/AMPhtml/status/986750295077040128" layout="responsive" width="150" height="80" data-card-theme="dark" data-card-controls="0" > </amp-embedly-card> <amp-embedly-card data-url="https://www.youtube.com/watch?v=lBTCB7yLs8Y" layout="responsive" width="100" height="50" > </amp-embedly-card>
Standalone use outside valid AMP documents
Bento allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide Use AMP components in non-AMP pages.
To find the standalone version of
The URL to retrieve embedding information.
The URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.
The URL to an image. Specifies which image to use in article cards when
data-url points to an article. Not all image URLs are supported, if the image
is not loaded, try a different image or domain.
Enables share icons.
0: Disable share icons.
1: Enable share icons
The default is
Aligns the card. The possible values are
default value is
When recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.
0: Disables embedly recommendations.
1: Enables embedly recommendations.
The default value is
Specifies the via content in the card. This is a great way to do attribution.
Allows settings the
dark theme which changes the background color of the main
card container. Use
dark to set this theme. For dark backgrounds it's better
to specify this. The default is
light, which sets no background color of the
main card container.
title attribute for the component to propagate to the underlying
<iframe> element. The default value is
This element includes common attributes extended to AMP components.
See amp-embedly-card rules in the AMP validator specification.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.Go to Stack Overflow Found a bug or missing a feature?
The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.Go to GitHub