Las tarjetas son una capa personalizable al estilo de las notificaciones que los miembros de Vimeo Business, Vimeo Premium y Vimeo Enterprise pueden configurar para que aparezcan durante la reproducción de sus videos insertados. Puedes hacer tarjetas tan simples como un titular o elegir que se completen con una descripción, una miniatura y un enlace a cualquier destino.
✦ Configuración de tarjetas en tus videos insertados
Para añadir o editar tarjetas para uno de tus videos, dirígete a la pestaña Herramientas de interacción de tu configuración de video. En la sección Durante el video , haz clic en + Tarjetas, formulario de contacto y luego selecciona "Tarjeta" en el menú desplegable para mostrar los campos que debes completar para tu tarjeta.
Como mínimo, tienes que introducir un título para tu tarjeta y la marca de tiempo para cuando quieras que aparezca por primera vez durante tu video. También tienes la opción de añadir una descripción, un enlace y una miniatura. Mientras editas tu tarjeta, verás que la vista previa del reproductor se actualiza en tiempo real. El tiempo más corto en el que se pueden añadir tarjetas una al lado de la otra es de seis segundos.
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.
Nota: Las tarjetas solo aparecen en tus videos insertados y presentaciones. La experiencia en el sitio de tus videos no incluirá las tarjetas que hayas agregado. Además, al agregar una tarjeta a tu vídeo se desactivan los controles de "Me gusta", "Ver más tarde" y "Compartir".
✦ Diferencias entre la visualización de las tarjetas en computadoras de escritorio y en dispositivos móviles
La experiencia de visualización de las tarjetas será distinta según la plataforma en la que se comparta el video y el dispositivo en el que se esté visualizando.
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.
En los dispositivos móviles (o cuando el reproductor está insertado a menos de 415px de ancho), las tarjetas aparecerán debajo del reproductor insertado. Una vez que la tarjeta aparezca, permanecerá visible hasta que sea el turno de la siguiente tarjeta. Los espectadores podrán deslizar las tarjetas debajo del reproductor, lo cual los llevara al punto del video en el cual hayan programado la primera aparición de la tarjeta.
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.
✦ Análisis de interacción para tarjetas
Desde el panel de análisis de tu video, puedes comprobar el número de veces que se han visto todas tus tarjetas y se ha hecho clic en estas durante los últimos 30 días. Obtén más información sobre el análisis de las herramientas de interacción de video aquí.
✦ Tarjetas en presentaciones
Las tarjetas, así como cualquier otra herramienta de interacción de video (como pantallas finales y formularios de contacto) que hayas agregado previamente, se mostrarán ahora dentro de tu presentación. Una vez que hayas compartido tu presentación, tus espectadores verán tus tarjetas cuando la vean.
✦ El código de inserción para los videos con tarjetas
El código de inserción habitual de Vimeo es un iframe sencillo. Para ser compatibles con las tarjetas en todos los ecosistemas de visualización, le agregamos una envoltura javascript al código habitual. El nuevo código de inserción es adaptable, lo cual permite que el reproductor mantenga su relación de aspecto original cuando se ajuste el tamaño de la ventana del explorador. A continuación te mostramos un ejemplo del código de inserción con la envoltura javascript en negrita.
<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>
Si anteriormente habías insertado un video al que acabas de agregarle tarjetas, tendrás que actualizar el código de inserción en tu sitio para que incluya la envoltura javascript. Luego de que le hayas agregado las tarjetas a tu video, podrás acceder al nuevo código de inserción al hacer clic en el botón gris Código de inserción que aparece encima de la vista previa del reproductor en la configuración de inserción.
✦ Prácticas recomendables para compartir videos con tarjetas en las plataformas sociales
Si vas a insertar un video con tarjetas en plataformas sociales, como Twitter o Linkedin, simplemente puedes pegar la URL de tu página de video de Vimeo en tu publicación en lugar del código de inserción.
Si quieres compartir tu video en Facebook o en Twitter, pero quieres que la publicación conecte a los espectadores con tu página web y no con la página de Vimeo de tu video, tendrás que agregarle códigos extra a tu página web. Conoce más sobre la optimización de tu página web para hacer publicaciones en redes sociales.
✦ Prácticas recomendables para insertar videos con tarjetas
Si vas a insertar videos con tarjetas a través de un creador de páginas web, como Wix o Squarespace, asegúrate de que a la envoltura javascript no le falte el código de inserción. También recomendamos que evites usar widgets para insertar tus videos.
Si vas a insertar varios videos con tarjetas en una página, recomendamos que solo agregues la etiqueta javascript <script src="https://player.vimeo.com/api/player.js"></script> a uno de los videos en tu página. Todas las demás inserciones solo deberán incluir la nueva etiqueta <div>. Incluir la etiqueta script de javascript en varios videos a la vez impactará el desempeño de tu página.
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
- Desplázate hacia abajo del menú hasta que alcances el encabezado Más, luego selecciona la opción </> Código
- 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
- Cuando estés listo, haz clic en Actualizar en la esquina superior derecha
- 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
- Cuando estés listo, haz clic en el botón Publicar.