Saltar al contenido principal

Agregar tarjetas a los videos

Esta función requiere una membresía Professional, Studio o Enterprise.

Las tarjetas son una capa personalizable al estilo de una notificación que los miembros de Vimeo pueden configurar para que aparezca durante la reproducción de sus videos insertados o no listados. Puedes hacer tarjetas tan simples como un titular o completarlas con una descripción, una miniatura y un enlace a cualquier destino.

⚠️Nota: agregar una tarjeta a tu video desactiva los controles Me gusta, Ver después y Compartir.

En este artículo:

Cómo configurar las tarjetas en tus videos

Para añadir o editar tarjetas en uno de tus videos, ve a la pestaña Interactivo del lado izquierdo. Selecciona Agregar a [...] para que aparezcan 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 de cuándo quieres 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 intervalo más corto en el que se pueden añadir tarjetas una junto a otra es de seis segundos.

Cuando termines de editar tu tarjeta, pulsa el botón Agregar. Puedes añadir hasta una tarjeta por segundo de tu video. Cuando termines de editar todos los ajustes de inserción, pulsa el botón Guardar.

💡Consejo: los archivos de miniatura personalizados no pueden superar las 9600 px de ancho ni los 5400 px de alto. Para obtener los mejores resultados, recomendamos subir una imagen con las mismas dimensiones que tu video (por ejemplo, subir un archivo de miniatura de 1920 px x 1080 px para un video de 1920 x 1080).

Visualización de las tarjetas

La experiencia de visualización de los videos con tarjetas varía según la plataforma en la que se comparte el video y el dispositivo que se usa para verlo.
⚠️ Nota: las tarjetas solo se muestran en reproductores que miden, como mínimo, 600 px de ancho en modo horizontal (reproductores estándar) y 225 px de ancho en modo vertical (reproductores en los que la altura es mayor que la anchura).

Las tarjetas permanecen en la esquina superior derecha de tu video durante los seis segundos posteriores a su primera aparición, a menos que hayas añadido otra tarjeta para que aparezca en ese intervalo. Los videos con tarjetas se reproducen en línea en cualquier lugar donde se inserten. También aparecen en la página del video en Vimeo si su configuración de privacidad es "Privado" o "No listado".

cards.png

En sitios como Wix, Squarespace y WordPress, los videos con tarjetas se reproducen en línea en la web móvil. En Facebook y Twitter, las aplicaciones móviles y la web móvil enlazan con la página del video en vimeo.com.

Estadísticas de interacción para las tarjetas

Desde el panel de analíticas de la página del video, puedes comprobar el número de veces que se han visto y en las que se ha hecho clic en todas sus tarjetas en los últimos 30 días. Obtén más información sobre las analíticas de las herramientas de interacción de video en el panel de analíticas de Configuración de video.

Tarjetas en presentaciones

Las tarjetas, así como cualquier otra herramienta de interacción de video que hayas añadido anteriormente, ahora se mostrarán 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 que las tarjetas funcionen en todos los entornos de visualización, añadimos un wrapper de javascript al código de inserción habitual. El nuevo código de inserción es adaptable, lo que permite que el reproductor mantenga su relación de aspecto original siempre que se cambie el tamaño de la ventana del navegador. A continuación tienes un ejemplo del código de inserción, con el wrapper de 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 antes has insertado un video al que acabas de añadir tarjetas, tendrás que actualizar el código de inserción de tu sitio para que incluya el wrapper de javascript. Puedes acceder al nuevo código de inserción después de añadir tarjetas a tu video haciendo clic en el botón gris Código de inserción que hay encima de la vista previa del reproductor en tus ajustes de inserción.

Prácticas recomendadas 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, puedes simplemente pegar la URL de la página de tu video de Vimeo en tu publicación en lugar del código de inserción de Vimeo.

Si quieres compartir tu video en Facebook o Twitter, pero quieres que tu publicación enlace con tu propio sitio en lugar de con la página del video en Vimeo, tendrás que añadir código adicional a tu sitio web. Obtén más información en "Optimiza tu sitio web para publicar en las plataformas de redes sociales"

Prácticas recomendadas para insertar videos con tarjetas

Si insertas videos con tarjetas a través de un creador de sitios web como Wix o Squarespace, asegúrate de que el wrapper de javascript no se elimine del código de inserción. También recomendamos evitar el uso de widgets para insertar tus videos.

Si insertas varios videos con tarjetas en una misma página, recomendamos añadir la etiqueta de javascript <script src="https://player.vimeo.com/api/player.js"></script> solo a uno de los videos de tu página. Todas las inserciones posteriores solo deben incluir la nueva etiqueta <div>.

Incluir la etiqueta de script de javascript varias veces puede afectar al rendimiento de tu página.

Para insertar un video con tarjetas con los creadores de sitios web habituales, sigue estos pasos:

  • Wix
    • En el editor de sitios web de Wix, haz clic en + Agregar, 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 hay encima del nuevo bloque gris de tu página para abrir la ventana de edición
    • Asegúrate de que está seleccionada la opción Código y, luego, pega tu código de inserción de Vimeo con el wrapper de Javascript
    • Haz clic en el botón azul Actualizar y, luego, publica los cambios en tu sitio
  • Squarespace
    • Entra en el modo de edición de tu página de Squarespace y, luego, haz clic en el icono + Agregar bloque de la esquina superior derecha de la página
    • Desplázate hacia abajo por el menú hasta llegar al encabezado Más y, luego, selecciona la opción </> Código
    • Pega tu código de inserción de Vimeo con el wrapper de Javascript y, luego, pulsa el botón Aplicar
    • Cuando hayas terminado de hacer todas las ediciones de tu página, pulsa Guardar en la esquina superior izquierda
  • WordPress
    • Selecciona la pestaña de edición HTML de tu entrada de WordPress
    • Pega el código de inserción de Vimeo con el wrapper de Javascript
    • Cuando estés listo, pulsa Actualizar en la esquina superior derecha
  • Tumblr
    • Elige Video entre los tipos de publicación
    • Selecciona la opción Agregar video de la web
    • Pega tu código de inserción de Vimeo con el wrapper de Javascript
    • El reproductor insertado de Vimeo se cargará y tendrás la opción de añadir texto a la publicación de Tumblr
    • Cuando estés listo, pulsa el botón Publicar.

Artículos relacionados