Ajouter des vidéos - Aide Framer

Last updated on 10/16/2025@mrbirddev
Ajouter des vidéos - Aide Framer

Ajouter des vidéos

Vous pouvez améliorer votre site web en ajoutant des vidéos, soit en téléchargeant un fichier local, soit en intégrant du contenu de plateformes comme YouTube et Vimeo.

Pour ajouter une vidéo à votre site, cliquez sur le bouton Insérer et accédez à la section Média. Ensuite, faites glisser et déposez un composant vidéo sur le Canvas. Vous pouvez choisir parmi trois options : un composant vidéo natif, YouTube ou Vimeo.

Définissez une image d'affiche pour servir de vignette vidéo. Cette image est utilisée par Google et d'autres moteurs de recherche pour afficher un aperçu dans les résultats de recherche et les extraits. L'affiche doit mesurer au moins 60 x 30 px. Bien que Framer optimise le chargement des vidéos, il n'optimise pas le contenu vidéo lui-même.

Capture d'écran du panneau "Média" dans le menu "Insérer" qui montre tous les différents composants Image et vidéo.

Intégration depuis YouTube ou Vimeo

Pour intégrer des vidéos de YouTube ou Vimeo, entrez simplement l'URL de la vidéo dans le composant correspondant. La vidéo sera intégrée directement sur le Canvas.

Pour les vidéos locales ou les MP4 hébergés, utilisez le composant Vidéo. Vous pouvez personnaliser les propriétés suivantes :

  • Lecture automatique
  • Images d'affiche
  • Rayon de bordure
  • Bouclage
  • Taille

Capture d'écran du menu de droite montrant les différentes options du composant Youtube dans Framer.

Lecture automatique des vidéos

Les navigateurs modernes, tels que Chrome et Safari, exigent que les vidéos en lecture automatique soient muettes par défaut. Si votre vidéo a du son, il est préférable de déclencher la lecture après une interaction utilisateur (comme cliquer sur un bouton). Vous pouvez également consulter notre guide sur comment lire des vidéos lorsqu'elles entrent dans le champ de vision.

Accessibilité des vidéos

Pour les vidéos sans piste audio, incluez une description textuelle sous la vidéo pour résumer son contenu. Voir des exemples ici.

Retour à l'aide Framer

Last updated on 10/16/2025@mrbirddev
Recent Articles
Loading...