Las tarjetas son una capa personalizable al estilo de una notificación que los miembros de Vimeo Business y Vimeo Premium pueden configurar para que aparezcan durante la reproducción de sus videos insertados. Tus tarjetas pueden tener solo un encabezado o puedes llenarlas con una descripción, una miniatura y un vínculo a cualquier destino en la web.
✦ Configuración de tarjetas en tus videos insertados
Para agregar o editar tarjetas en uno de tus videos, ve a la pestaña Herramientas de interacción de la configuración de video. En la sección Durante el video , haz clic en + Tarjetas, captura de correo electrónico y, luego, selecciona “Tarjeta” en el menú desplegable para revelar los campos que debes completar para tu tarjeta.
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.
Ten en cuenta lo siguiente: Las tarjetas solo aparecen en los videos insertados. La experiencia de tus videos en la página web no incluirá las tarjetas que hayas agregado. Además, al agregar una tarjeta al video, se desactivan los controles Me gusta, Ver después 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.
✦ Estadísticas de interacción para las tarjetas
Desde el panel de estadísticas de tu video, revisa cuántas veces los espectadores han visto todas sus tarjetas y cuántas veces han hecho clic en ellas durante los últimos 30 días. Aprende más sobre las estadísticas de interacción para videos aquí.
✦ 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.