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.
⚠️Note: Adding a card to your video disables the Like, Watch Later, and Share controls.
In this article:
- Setting up cards on your videos
- Viewing cards
- Engagement analytics for cards
- Cards in showcases
- Embed code for videos with cards
- Best practices for sharing videos with cards on social platforms
- Best practices for embedding videos with cards
Setting up cards on your videos
To add or edit cards for one of your videos, head to the Interactive tab on the left side. 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.
💡Tip: Custom thumbnail files cannot be larger than 9600px wide or 5400px tall. For best results, we recommend uploading an image with the same dimensions as your video (for example, uploading a 1920px x 1080px thumbnail file for a 1920 x 1080 video).
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."
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.