Esta función requiere una membresía Business, Premium, Standard, Advanced o Enterprise.
Las tarjetas son una capa personalizable al estilo de una notificación que los miembros de Vimeo pueden configurar para que aparezcan durante la reproducción de sus videos insertados o no listados. Tus tarjetas pueden tener solo un encabezado o puedes llenarlas con una descripción, una miniatura y un enlace a cualquier destino en la web.
En este artículo:
- Cómo configurar las tarjetas en tus videos
- Visualización de las tarjetas
- Estadísticas de interacción para las tarjetas
- Tarjetas en presentaciones
- Código de inserción para los videos con tarjetas
- Prácticas recomendables para compartir videos con tarjetas en las plataformas de redes sociales
- Prácticas recomendadas para insertar videos con tarjetas
Cómo configurar las tarjetas en tus videos
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: Al agregarle una tarjeta a tu video, desactivarás los controles Me gusta, Ver después y Compartir.
Visualización de las tarjetas
La experiencia de visualización de los vídeos con tarjetas variará en función de la plataforma en la que se comparta el vídeo y del dispositivo que se utilice para verlo.
⚠️ Nota: Las tarjetas sólo se mostrarán en reproductores que tengan, como mínimo, 600px de ancho en modo horizontal (reproductores estándar) y 225px de ancho en modo vertical (reproductores en los que la altura sea mayor que la anchura).
Las tarjetas permanecerán en la esquina superior derecha de tu video durante seis segundos cuando aparezcan por primera vez, a menos que hayas agregado otra tarjeta para que aparezca durante dicho periodo de tiempo. Los videos con tarjetas se reproducen en orden en cualquier lugar en el que estén insertados. También aparecen en la página del video en Vimeo si su configuración de privacidad es Privado o No listado.
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 análisis de la página de vídeo,puede comprobar el número de veces que se han visto y se ha hecho clic en todas sus tarjetas durante los últimos 30 días. Más información sobre los análisis de las herramientas de interacción de vídeo en Panel deanálisis de la configuración devídeo.
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.Obtén más información en Presentaciones de Vimeo.
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 un wrapper javascript al código habitual. El nuevo código de inserción es adaptable, lo que 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 el wrapper 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 el wrapper javascript. Después 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 de redes sociales
Si vas a insertar un video con tarjetas en plataformas de redes 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 agregar códigos extra a tu sitio web. Obtén más información en Optimiza tu página web para publicar en las plataformas de redes sociales.
Prácticas recomendadas 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 de comandos de javascript varias veces puede tener un impacto en el rendimiento de tu página.
Para insertar un video con tarjetas usando los creadores de sitios web habituales, sigue estos pasos:
- Wix
- Haz clic en + Agregar en el editor de páginas web de Wix, selecciona Más al final de la lista y 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 en el menú hasta que llegar al 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.