Cards are a customizable, notification-style layer that Vimeo Business and Vimeo Premium 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, email capture, then select “Card” from the dropdown menu to reveal the fields to fill out for your card.
Como mínimo tendrás que ingresar un título y la marca de tiempo en la que quieras que aparezca la tarjeta por primera vez en tu video. También puedes agregar una descripción, un vínculo y una miniatura. A medida de que edites la tarjeta, verás los cambios en tiempo real en el reproductor.
Cuando termines de editar la tarjeta, haz clic en el botón Agregar. Puedes agregar un máximo de una tarjeta por segundo en tu video. Cuando termines de editar todas las configuraciones de inserción, haz clic en el botón Guardar.
Please note: cards only appear in your embedded videos. 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.
En las computadoras de escritorio, las tarjetas permanecerán en la esquina superior derecha de tu video durante seis segundos cuando aparezcan por primera vez, a menos de que hayas agregado otra tarjeta para que aparezca durante dicho periodo de tiempo. Las tarjetas se reproducirán en orden donde quiera que las hayas insertado cuando la visualización se haga desde una computadora de escritorio.
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.
Los videos con tarjetas se reproducen en orden al visualizarlos en dispositivos móviles en páginas como Wix, Squarespace y Wordpress. En Facebook y en Twitter, tanto las aplicaciones como los exploradores móviles conectarán con la página del video en vimeo.com.
✦ Interaction stats for cards
From the stats 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 stats for video interaction tools here.
✦ The 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.
Aquí te damos una breve explicación de cómo insertar videos con tarjetas en las páginas para construir páginas web:
- Wix
- Haz clic en + Agregar en el editor de páginas web de Wix, selecciona Más al final de la lista, luego elige la opción Código HTML
- Haz clic en el botón Ingresar código que aparece encima del nuevo bloque gris en tu página para así abrir el módulo de edición
- Asegúrate de que la opción Código esté seleccionada, luego pega tu código de inserción de Vimeo con la envoltura javascript
- Haz clic en el botón azul Actualizar, luego publica los cambios en tu sitio web
- Squarespace
- Ingresa al modo de edición de tu página de Squarespace, luego haz clic en el ícono + Agregar bloque en la esquina superior derecha de la página
- Scroll down through the menu until you reach the More heading, the select the </> Codeoption
- Pega tu código de inserción de Vimeo con la envoltura javascript, luego haz clic en el botón Aplicar
- Cuando le hayas terminado de marcar todos los cambios a tu página, haz clic en Guardar en la esquina superior izquierda
- Wordpress
- Selecciona la pestaña de edición HTML en tu publicación de Wordpress
- Pega el código de inserción de Vimeo con la envoltura javascript
- When you're ready, hit Update in the top right corner
- Tumblr
- Elige Video en la selección de tipo de publicación
- Selecciona la opción Agregar video de la web
- Pega tu código de inserción de Vimeo con la envoltura javascript
- Se cargará el reproductor insertado de Vimeo y tendrás la opción de agregarle texto a tu publicación
- When you’re ready, hit the Post button.