Cards are a customizable, notification-style layer that Vimeo Business, Vimeo Premium, and Vimeo Enterprise members can set to appear during playback of their embedded 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.
✦ Setting up cards on your embedded 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.
Please note: cards only appear in your embedded videos and showcases. The on-site experience of your videos will not include any cards you’ve added. Also, adding a card to your video disables the Like, Watch Later, and Share controls.
✦ Viewing cards on desktop vs. mobile
The viewing experience for videos with cards will differ depending on platform the video is shared on and the device being used to view it.
On desktop, 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 when viewed on desktop.
On mobile (or when the player is embedded below 415px wide), cards appear below the embedded player. Once a card appears, it will remain visible until the next card in the video is scheduled to appear. The viewer can slide through the cards below the player, which will take them to the point in the video when the card they are viewing was scheduled to first appear.
On sites like Wix, Squarespace, and Wordpress, videos with cards play in-line on the mobile web. On Facebook and Twitter, the mobile apps and mobile web will link to vimeo.com video page.
✦ Interaction analytics for cards
From the analytics panel for your video, 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 here.
✦ 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.
✦ The embed code for videos with cards
<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>
✦ 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 in 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 web site. Learn more about optimizing your website for posting to social platforms.
✦ Best practices for embedding videos with cards
Here’s a quick rundown of how to embed a video with cards on the most common website builders:
- 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
- Click the blue Update button, then publish the changes to your site
- 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, the select the </> Codeoption
- When you’ve finished making all edits to your page, hit Save in the top left corner
- Select the HTML editing tab in your Wordpress post
- When you're ready, hit Update in the top right corner
- Choose Video from the selection of post types
- Select Add video from web option
- 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.