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.
In this article:
- Setting up cards on your embedded videos
- Viewing cards on desktop vs. mobile
- Interaction 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 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.
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 it’s 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 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
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.
Here’s a quick rundown of how to embed a video with cards on the most common website builders:
- 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, the select the </> Codeoption
- 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.
