Ajouter des fiches aux vidéos

Cette fonctionnalité est disponible avec un abonnement Business, Premium, Standard, Advanced ou Enterprise.

Les fiches sont des écrans personnalisables de type notification que les membres Vimeo peuvent configurer pour apparaître durant la lecture de leurs vidéos intégrées ou non répertoriées. Vous pouvez créer des fiches aussi simples qu'un titre ou choisir de les étoffer avec une description, une vignette et un lien vers une destination sur le Web.

Sommaire de l'article :

• Ajouter des fiches à vos vidéos
• Visualisation des fiches
• Statistiques d'engagement pour les cartes
• Fiches dans les présentations
• Code d'intégration pour les vidéos avec fiches
• Bonnes pratiques pour partager des vidéos avec fiches sur les plateformes de réseaux sociaux
• Bonnes pratiques pour intégrer des vidéos avec fiches

Ajouter des fiches à vos vidéos

Pour ajouter ou modifier des fiches pour l'une de vos vidéos, rendez-vous sur l'onglet Outils d'interaction de ses paramètres vidéo. Dans la section Pendant la vidéo, cliquez sur + Fiches, formulaires de contact, puis sélectionnez « Fiche » depuis le menu déroulant pour révéler les champs destinés à configurer votre fiche.

Vous devez saisir au moins un titre pour votre fiche ainsi que l'horodatage de sa première apparition dans votre vidéo. Vous avez également la possibilité d'ajouter une description, un lien et une vignette. Les modifications apportées à la fiche seront affichées en temps réel dans l'aperçu du player. La durée la plus courte pendant laquelle des fiches peuvent être ajoutées les unes à côté des autres est de six secondes.

Une fois la configuration de votre fichier terminée, cliquez sur le bouton Ajouter. Vous pouvez ajouter jusqu'à une carte par seconde sur votre vidéo. Une fois que vous avez terminé de configurer vos paramètres d'intégration, cliquez sur le bouton Enregistrer.

⚠️Remarque : Ajouter un fichier à votre vidéo désactivera les commandes mention J'aime, Regarder plus tard et Partager..

Visualisation des fiches

L'expérience de visionnage des vidéos avec fiches sera différente selon la plateforme sur laquelle la vidéo est partagée et l'appareil utilisé.

⚠️ Remarque : Les fiches ne s'afficheront que sur les players qui ont, au minimum, une largeur de 600 px en mode horizontal (players standard) et de 225 px en mode vertical (players avec une hauteur supérieure à la largeur).

Les fiches restent en haut à droite de votre vidéo pendant six secondes, à moins que vous n'ayez ajouté une autre fiche qui doit apparaitre sur cette fenêtre. Les vidéos avec fiches sont lues en ligne partout où elles sont intégrées. Elles apparaissent également sur la page vidéo de Vimeo si leurs paramètres de confidentialité sont définis sur « Privée » ou « Non répertoriée ».

Sur des sites comme Wix, Squarespace et WordPress, les vidéos avec cartes sont lues en ligne sur le web mobile. Sur Facebook et Twitter, les applications mobiles et le web mobile renverront à la page vidéo de vimeo.com.

Statistiques d'engagement pour les cartes

Le panneau d'analyse sur la page de votre vidéo vous permet de consulter le nombre de fois où toutes les cartes ont été vues et consultées au cours des 30 derniers jours. Pour en savoir plus sur les statistiques pour les outils d'interaction vidéo, consultez le Panneau d'analyse des paramètres vidéo.

Fiches dans les présentations

Les fiches, ainsi que tout autre outil d'interaction vidéo (comme les écrans de fin et les formulaires de contact), que vous avez précédemment ajoutées seront désormais affichées dans votre présentation. Une fois que vous aurez partagé votre présentation, les spectateurs verront vos fiches lorsqu'ils regarderont la présentation. Pour en savoir plus, consultez Présentations Vimeo.

Code d'intégration pour les vidéos avec fiches

Le code d'intégration classique de Vimeo est un code iframe simple. Afin de supporter les fiches dans tous les environnements de visionnage, nous ajoutons un wrapper javascript au code d'intégration. Le nouveau code d'intégration est responsif, ce qui permet au player de maintenir son format d'image initial, quelle que soit la dimension de la fenêtre. Vous trouverez un exemple de code intégré ci-dessous avec le wrapper javascript en gras. Voir l'exemple de code d'intégration ci-dessous, avec le wrapper javascript en gras.

<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 vous avez déjà intégré une vidéo à laquelle vous venez d'ajouter des fiches, vous devrez mettre à jour le code d'intégration sur votre site pour inclure le wrapper javascript. Vous pouvez accéder au nouveau code d'intégration après avoir ajouté des fiches à votre vidéo en cliquant sur le bouton gris Code d'intégration au-dessus de l'aperçu du player dans vos paramètres d'intégration.

Bonnes pratiques pour partager des vidéos avec fiches sur les plateformes de réseaux sociaux

Si vous intégrez une vidéo avec fiches sur des plateformes de réseaux sociaux comme Twitter ou LinkedIn, il vous suffit de coller l'URL de votre page vidéo Vimeo dans votre message au lieu du code d'intégration Vimeo.

Si vous souhaitez partager votre vidéo sur Facebook ou Twitter, mais que vous voulez que votre publication renvoie à votre site plutôt qu'à la page vidéo de Vimeo, vous devrez ajouter un code supplémentaire à votre site. Pour en savoir plus, consultez « Optimiser votre site Web pour le publier sur les plateformes de réseaux sociaux »

Bonnes pratiques pour intégrer des vidéos avec fiches

Si vous intégrez des vidéos avec des fichiers à travers une plateforme de création de sites Web telle que Wix ou Squarespace, vous devrez vous assurer que le contenant javascript n'est pas supprimé du code d'intégration.  Nous recommandons aussi d'éviter d'utiliser des widgets pour intégrer vos vidéos.

Si vous intégrez plusieurs vidéos avec des fiches sur une page, nous vous recommandons d'ajouter la balise javascript <script src="https://player.vimeo.com/api/player.js"></script> à l'une des vidéos sur votre page uniquement.  Toutes les intégrations suivantes ne doivent inclure que la nouvelle balise <div>.

Inclure la balise de script javascript plusieurs fois pourrait avoir un impact sur la performance de votre page.

Pour intégrer une vidéo avec des fiches en utilisant les plateformes de création de sites web courants, veuillez suivre les étapes suivantes :

• Wix
• Dans l'éditeur Wix, cliquez +Ajouter, puis sélectionnez Plus en bas de la liste. Choisissez ensuite l'option code HTML
• Cliquez le bouton Saisir code au-dessus du nouveau bloc gris sur votre page pour activer le modal d'édition
• Assurez-vous que l'option Code est sélectionnée, puis collez votre code d'intégration Vimeo avec le conteneur Javascript
• Cliquez sur le boutonMettre à jour, puis publiez les modifications sur votre site
• Squarespace
• Lancer le mode éditeur de votre page Squarespace, puis cliquez l'icône + Add block en haut à droite de la page
• Faites défiler le menu jusqu'à l'en-tête Plus, puis sélectionnez l'option </> Code
• Collez votre code d'intégration Vimeo avec le conteneur javascript, puis cliquez sur le bouton Apply
• Lorsque vous avez fini d'effectuer toutes vos modifications sur la page, cliquez Save en haut à gauche
• Wordpress
• Sélectionnez l'onglet d'édition du code HTML dans votre publication Wordpress
• Collez le code d'intégration Vimeo avec le conteneur javascript  
• Lorsque vous êtes prêt(e), cliquez Mettre à jouren haut à droite
• Tumblr
• Choisissez Vidéo dans les options de types de publications
• Sélectionnez l'option Ajouter une vidéo du Web
• Collez votre code d'intégration Vimeo avec le conteneur Javascript
• Le player intégré Vimeo sera chargé, et vous aurez l'option d'ajouter du texte à la publication Tumblr
• Lorsque vous êtes prêt(e), cliquez sur le bouton Publier.