---
updatedAt: 2025-05-21T20:29:19.000Z
agentTools:
  projectIndex: https://docs.embed.ly/llms.txt
---

# Cards

Cards provide you with responsive and shareable embeds to drive the reach of your websites, blog posts, and articles. Our [code generator](http://embed.ly/code) makes it super simple to create a card of any site.

The follow explains how to use platform.js to programmatically create cards.

## Basics

This adds [platform.js](https://docs.embed.ly/docs/platformjs) to your site and loads the script asynchronously. By\
default `platform.js` will create a card for an `A` tag or `BLOCKQUOTE`\
with the class `embedly-card`. For example, this will create a card for\
embed.ly:

```html
<a href="http://embed.ly" class="embedly-card">Embedly</a>
```

And this will also create a card:

```html
<blockquote class="embedly-card">
    <h4><a href="http://embed.ly/docs">Documentation</a></h4>
    <p>
      Embedly's Documentation is the best.
    </p>
  </blockquote>
```

The difference here, is that the `H4` will become the title of the Card and\
the `P` text will become the description.

## Customize

There are a number of `data-card-*` attributes that you can use to customize\
the card. They are as follows:

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        Attribute
      </th>

      <th>
        Value
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        data-card-via
      </td>

      <td>
        URL i.e [http://embed.ly](http://embed.ly)
      </td>

      <td>
        Specifies the via content in the card. It's a great way to do attribution.
      </td>
    </tr>

    <tr>
      <td>
        data-card-chrome
      </td>

      <td>
        "1", "0"
      </td>

      <td>
        Chrome of 0 will remove the left hand colored border.
      </td>
    </tr>

    <tr>
      <td>
        data-card-theme
      </td>

      <td>
        "light", "dark"
      </td>

      <td>
        For dark backgrounds it's better to specify the dark theme.
      </td>
    </tr>

    <tr>
      <td>
        data-card-image
      </td>

      <td>
        URL i.e. [http://embed.ly/image.jpg](http://embed.ly/image.jpg)
      </td>

      <td>
        Specify which image to use in article cards.
      </td>
    </tr>

    <tr>
      <td>
        data-card-embed
      </td>

      <td>
        URL i.e. [https://vimeo.com/62648882](https://vimeo.com/62648882)
      </td>

      <td>
        Instead of using the static page content, the card will embed the video or rich media.
      </td>
    </tr>

    <tr>
      <td>
        data-card-controls
      </td>

      <td>
        "1", "0"
      </td>

      <td>
        Enable Share Icons. Default: "1"
      </td>
    </tr>

    <tr>
      <td>
        data-card-width
      </td>

      <td>
        "100%", "300px", etc.
      </td>

      <td>
        Sets the width of the card. Specifically the max-width, so card is still responsive.
      </td>
    </tr>

    <tr>
      <td>
        data-card-align
      </td>

      <td>
        "left", "center", "right"
      </td>

      <td>
        Align the card, Default: "center"
      </td>
    </tr>

    <tr>
      <td>
        data-card-recommend
      </td>

      <td>
        "1", "0"
      </td>

      <td>
        Disable Embedly Recommendations on video and rich cards. Default: 1
      </td>
    </tr>

    <tr>
      <td>
        data-card-key
      </td>

      <td>
        "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      </td>

      <td>
        You Embedly API Key. If you are a paid user this will remove Embedly's branding from the cards.
      </td>
    </tr>
  </tbody>
</Table>

## Javascript

Platform.js has some pretty interesting features for customizing cards further. For example, if you do not want to use a custom class instead of `embedly-card` you can use the following code:

```javascript
embedly('card', '.card-this');
```

If you would like to create a card from a single element you can do the\
following:

```javascript
var a = document.getElementById('#myCard');
 embedly('card', a);
```

Lastly if you would like to limit the cards to only embed certain types of\
media you can pass in a `types` argument::

```javascript
embedly('card', {types: ['rich', 'video', 'image']});
```

or with a custom selector as well:

```javascript
embedly('card', {selector: 'a.embed', types: ['article', 'image']});
```

If `platform.js` has not loaded yet, it will queue actions till we are ready\
to act on them.

## Listeners

When using cards in non-standard displays you may want to listen to some events. Cards supports the following events.

**`card.rendered`**

When the card has actually been rendered.

```javascript
embedly('on', 'card.rendered', function(iframe){
  // iframe is the card iframe that we used to render the event.
  $card = $(iframe);

  // Grab the width and height.
  console.log($card.width(), $card.height());
});
```

**`card.resize`**

When the card has been resized. We do this fairly often when the browser window has changed size, or the content in the card has changed.

```javascript
embedly('on', 'card.resize', function(iframe){
  // iframe is the card iframe that we used to render the event.
  $card = $(iframe);

  // Grab the width and height.
  console.log($card.width(), $card.height());
});
```

## Defaults

If you would like to set options globally instead of per card you use\
`defaults`. Here's an example of setting all the cards to align right with a\
width of 700px and remove the chrome.

```javascript
embedly("defaults", {
  cards: {
    key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    width: 700,
    align: 'right',
    chrome: 0
  }
});
```

Note that data attributes on the card override these defaults. If you wish for the defaults to override the data attributes, you can add `override: true` like so:

```javascript
embedly("defaults", {
  cards: {
    override: true,
    width: '90%',
    ...
  }
});
```

## Player

Embedly gives you programmatic control of embedded video via [Player.js](https://github.com/embedly/player.js/) and we've expanded that to Cards as well. Player allows you to play, pause, seek and listen to events for cards with video. Here's a quick example:

```javascript
embedly('player', function(player){
  console.log(player.url) // URL of the media that we are operating on.

  // When the user pauses a video, perform an action.
  player.on('pause', function(){
    //display modal.
  });

  // Autoplay all the videos that support Player.js
  player.play()
});
```

Learn more about the [Player functionality](https://docs.embed.ly/docs/player)

## CSS Customization

> 📘 CSS is only available on a paid plan.
>
> You can upgrade inside [app.embed.ly](https://app.embed.ly)

Embedly allows you to customize the styles inside a card. If you want to change the font or colors of the card than this feature is for you! There are a couple of ways to pass styles into a card. We will outline them here.

## inline

You can specify the css styles inline via a `style` tag. Embedly will look for a single `style` tag with the `embedly-css` and use that CSS.

```html
<style class="embedly-css">
  @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
  .card {
    font-family: 'Open Sans Condensed', sans-serif;
  }
  .card a, .card .action {
    color: red;
  }
  .hdr {
    display:none;
  }
</style>
```

## link

You can specify a stylesheet for Embedly to place inside the card via a `link` tag. Embedly will look for a single `link` tag with the `embedly-css` and use that CSS.

```html
<head>
  ...
	<link rel="stylesheet" href="http://example.com/styles/card.css">
</head>
```

## defaults

Lastly you can pass the css through defaults like so:

```javascript
embedly("defaults", {
  cards: {
    key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
		css: 'http://example.com/styles/card.css'
  }
});
```

## demo

<Embed url="https://jsfiddle.net/vuwLcpw1/?height=600&tabs=result,html" title="Edit fiddle - JSFiddle" favicon="https://jsfiddle.net/favicon.png" provider="jsfiddle.net" href="https://jsfiddle.net/vuwLcpw1/?height=600&tabs=result,html" html="%3Ciframe%20class%3D%22embedly-embed%22%20src%3D%22%2F%2Fcdn.embedly.com%2Fwidgets%2Fmedia.html%3Furl%3Dhttps%253A%252F%252Fjsfiddle.net%252FvuwLcpw1%252F%253Fheight%253D600%2526tabs%253Dresult%252Chtml%26src%3Dhttps%253A%252F%252Fjsfiddle.net%252FvuwLcpw1%252Fembedded%252Fresult%252Chtml%252F%26type%3Dtext%252Fhtml%26key%3D02466f963b9b4bb8845a05b53d3235d7%26schema%3Djsfiddle%22%20width%3D%22600%22%20height%3D%22600%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%20allowfullscreen%3E%3C%2Fiframe%3E" />

## Remove Branding

Cards includes a "powered by Embedly" logo at the bottom of every card. If you would like to removed this branding, you can upgrade to a the embed product in [app.embed.ly](https://app.embed.ly/ar?path=settings%2Fplan).

Any card created through [app.embed.ly](https://app.embed.ly) will have branding removed within 24 hours due to browser caching.

For cards not generated through app.embed.ly you must include your API key, found [here](https://app.embed.ly/ar?path=api%2Fkey). You can do this one of two ways.

### On the Card

```html
<a href="embedly-card" data-card-key="XXXXXXXXXXXX" href="http://embed.ly"></a>
```

### Via JavaScript

```javascript
embedly("defaults", {
  cards: {
    key: 'XXXXXXXXXXXX',
  }
});
```