La transparence dont il est question ici se réfère spécifiquement à l'iframe (l'élément Web qui le contient), et non à la transparence des vidéos que vous mettez en ligne. Vimeo ne prend pas en charge la chaîne alpha pour le moment.
Sommaire de l'article :
- Arrière-plan transparent
- Désactiver l'arrière-plan transparent
- Appliquer une couleur d'arrière-plan personnalisée à un élément iFrame
Arrière-plan transparent
Par défaut, l'arrière-plan de l'iframe du player est transparent sur Vimeo. Tous les éléments du player (barre de lecture, boutons, etc.) sont épinglés à l'image de la vidéo, et non à la taille réelle de l'iframe.
Pour éviter les espaces vides dans une intégration, nous vous recommandons de choisir une taille de player qui correspond au format d'image natif de votre vidéo. Par exemple, si la vidéo d'origine a un format d'image 16/9, vous voudrez intégrer la vidéo avec des dimensions qui donnent un format d'image 16/9, comme par exemple 800 x 450.
⚠️Remarque : Les dimensions du player intégré peuvent également être influencées par le style CSS établi par votre page Web. Pour les vidéos intégrées dans un design responsif, assurez-vous que la hauteur et la largeur sont ajustées afin de conserver le format d'origine de votre vidéo.
Désactiver l'arrière-plan transparent
Si votre player s'affiche différemment de ce que vous aviez prévu à l'origine, vous pouvez désactiver l'arrière-plan transparent.
- Pour désactiver l'arrière-plan transparent, ajoutez ?transparent=0 à la fin de l'URL du player dans votre code d'intégration. Ce paramètre forcera un arrière-plan noir de l'iframe et épinglera les éléments du player à l'iframe, plutôt qu'à l'image vidéo.
Exemple de code d'intégration :
<iframe src="https://player.vimeo.com/video/137805268?transparent=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
⚠️Remarque : si le paramètre de confidentialité de votre vidéo est défini sur Non répertoriée, tout autre paramètre doit être ajouté après le hachage de confidentialité (?h=913052c8ff) à la fin de l'URL en utilisant & au lieu de ?. Voici un exemple de code iframe d'une vidéo non répertoriée avec l'utilisation du paramètre transparent :
<iframe src="https://
player.vimeo.com/
Appliquer une couleur d'arrière-plan personnalisée une iframe
Au lieu de la transparence ou des barres noires, vous pouvez choisir la couleur exacte qui remplit votre iframe. N'oubliez pas que vous devrez vous rendre dans les paramètres du player de votre vidéo pour ajuster la couleur du texte et de la barre de lecture dans le player.
- Pour appliquer une couleur d'arrière-plan spécifique, vous devez ajouter la propriété de style intégré suivante au code d'intégration de votre iframe :
style="background-color : #FFFFFF"
FFFFFF est la valeur hexadécimale de la couleur blanche, mais vous pouvez rechercher la base de données des codes hexadécimaux pour votre couleur souhaitée ici : http://www.color-hex.com/
Exemple de code d'intégration :
<iframe src="https://player.vimeo.com/video/236787722" style="background-color: #FFFFFF" width="1000" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
⚠️Remarque : Il n'est pas possible de modifier la couleur du cadre qui apparaît lors du chargement de votre vidéo. Cela ne devrait pas être perceptible pour la plupart des spectateurs, mais pourrait affecter ceux qui ont une connexion Internet plus lente.