Skip to main content

Add cards to videos

This feature requires a Business, Premium, Standard, Advanced, or Enterprise membership.

Cards are a customizable, notification-style layer that Vimeo members can set to appear during playback of their embedded or unlisted videos. You can make cards as simple as a headline or choose to flesh them out with a description, thumbnail, and link to any destination.

In this article:

Setting up cards on your videos

To add or edit cards for one of your videos, head to the Interaction tools tab of its video settings. Under the During video section, click + Cards, contact form, then select “Card” from the dropdown menu to reveal the fields to fill out for your card.

At a minimum, you need to enter a title for your card and the timestamp for when you want it to first appear during your video. You also have the option to add a description, link, and thumbnail. As you’re editing your card, you’ll see the player preview update in real-time. The shortest duration of time that cards can be added next to one another is six seconds.

Once you’re done editing your card, hit the Add button. You can add up to one card per second of your video. When you’re done editing all your embed settings, hit the Save button.

⚠️Note: Adding a card to your video disables the Like, Watch Later, and Share controls.

Viewing cards

The viewing experience for videos with cards will differ depending on the platform the video is shared on and the device being used to view it.

⚠️ Note: Cards will only display on players that are, at minimum, 600px wide on horizontal mode (standard players) and 225px wide on vertical mode (players where the height is greater than the width).

Cards stay in the top right corner of your video for the six seconds after they first appear, unless you’ve added another card to appear in that window. Videos with cards play in-line anywhere they’re embedded. They also appear on the video page on Vimeo if their privacy setting is "Private" or "Unlisted."

 

cards.png

On sites like Wix, Squarespace, and WordPress, videos with cards play in-line on the mobile web. On Facebook and Twitter, mobile apps and mobile web will link to the vimeo.com video page.

Engagement analytics for cards

From the analytics panel on the video page, you can check the number of times all of its cards have been seen and clicked for the past 30 days. Learn more about analytics for video interaction tools at Video Settings analytics panel.

Cards in showcases

Cards, as well as any other video interaction tools (such as end screens and contact forms) that you previously added, will now be shown within your showcase. Once you’ve shared your showcase, your viewers will see your cards when viewing the showcase. Learn more at Vimeo Showcases.

Embed code for videos with cards

The regular Vimeo embed code is a simple iframe. To support cards in all viewing environments, we add a javascript wrapper to the regular embed code. The new embed code is responsive, which allows the player to maintain its original aspect ratio whenever the browser window is resized. See the example embed code below, with the javascript wrapper in bold.

<div class="vimeo-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/76979871" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>


If you previously embedded a video that you’ve just added cards to, you’ll need to update the embed code on your site to include the javascript wrapper. You can access the new embed code after you’ve added cards to your video by clicking the gray Embed code button above the player preview in your embed settings.

Best practices for sharing videos with cards on social platforms

If you’re embedding a video with cards on social platforms like Twitter or LinkedIn, you can simply paste your Vimeo video page URL in your post instead of the Vimeo embed code.

If you’d like to share your video on Facebook or Twitter, but want your post to link back to your own site instead of the Vimeo video page, you’ll need to add some extra code to your website. Learn more at 'Optimize your website for posting to social media platforms'

Best practices for embedding videos with cards

If you’re embedding videos with cards through a website builder like Wix or Squarespace, you’ll want to make sure the javascript wrapper isn’t stripped out of the embed code.  We also recommend avoiding using widgets to embed your videos.

If you’re embedding multiple videos with cards on one page, we recommend only adding the javascript tag <script src="https://player.vimeo.com/api/player.js"></script> to one of the videos on your page.  All subsequent embeds should only include the new <div> tag.

Including the javascript script tag multiple times may have an impact on your page’s performance.

To embed a video with cards using common website builders, please follow these steps:

  • Wix
    • In the Wix website editor, click +Add, select More at the bottom of the list, then choose the HTML Code option
    • Click the Enter code button above the new gray block on your page to bring up the editing modal
    • Make sure the Code option is selected, then paste in your Vimeo embed code with the Javascript wrapper
    • Click the blue Update button, then publish the changes to your site
  • Squarespace
    • Enter editing mode for your Squarespace page, then click the + Add block icon in the top right of the page
    • Scroll down through the menu until you reach the More heading, then select the  </> Code option
    • Paste in your Vimeo embed code with the Javascript wrapper, then hit the Apply button
    • When you’ve finished making all edits to your page, hit Save in the top left corner
  • WordPress
    • Select the HTML editing tab in your WordPress post
    • Paste the Vimeo embed code with the Javascript wrapper  
    • When you're ready, hit Update in the top right corner
  • Tumblr
    • Choose Video from the selection of post types
    • Select Add video from web option
    • Paste in your Vimeo embed code with the Javascript wrapper
    • The embedded Vimeo player will load and you’ll have the option to add text to Tumblr post
    • When you’re ready, hit the Post button. 

Related articles