Vidéo - Aide Webflow
L'élément vidéo vous permet d'intégrer une vidéo, hébergée sur un site tiers comme YouTube ou Vimeo, n'importe où sur votre site.
Comment ajouter une vidéo
Il y a deux façons d'ajouter un élément vidéo à votre site :
- Ouvrez le Panneau d'ajout et faites glisser un élément vidéo sur votre canevas Webflow
- Appuyez sur Commande + E (sur Mac) ou Contrôle + E (sur Windows) pour ouvrir la Recherche rapide et recherchez l'élément vidéo
Comment formater les paramètres vidéo
Une fois que vous avez placé un élément vidéo sur votre canevas, vous aurez accès aux Paramètres vidéo où vous pouvez ajouter une URL et un titre. Pour accéder rapidement aux paramètres vidéo :
- Double-cliquez sur l'élément vidéo
- Sélectionnez l'élément vidéo et allez au Panneau des paramètres de l'élément (D)
Collez votre URL de vidéo, ajoutez un titre si vous le souhaitez, et appuyez sur Entrée / Retour. La vignette de votre vidéo apparaîtra dans l'élément vidéo.
Sources vidéo prises en charge
- YouTube (si vous souhaitez plus de contrôle sur votre vidéo YouTube, essayez d'utiliser un élément vidéo YouTube)
- Vimeo
- DailyMotion
- KickStarter (il vous suffit de coller l'URL principale de la campagne et Webflow récupérera la vidéo principale de la campagne)
- TED (support multilingue)
- Wistia
- Ustream
- Livestream
- Twitch
- Tudou
- Hulu
- SproutVideo
- Vidzflow
Comment définir les dimensions d'une vidéo
L'élément vidéo respecte les dimensions de son conteneur parent (par exemple, si vous le placez dans un bloc div, il occupera toute la largeur de ce bloc div). Si vous souhaitez définir une largeur et une hauteur personnalisées pour votre vidéo, vous pouvez créer un bloc div personnalisé. Pour ce faire, faites glisser un bloc div depuis le Panneau d'ajout et attribuez une valeur de largeur et une valeur de hauteur au bloc div. Maintenant, si vous glissez votre vidéo dans ce bloc div personnalisé, elle s'adaptera à cette taille.
Autres moyens d'ajouter des vidéos à votre site
Vous pouvez également ajouter des vidéos à votre site en utilisant d'autres éléments, notamment :
- Vidéo YouTube
- Vidéo de fond
- Lightbox
- Texte enrichi
- Intégration de code personnalisé
Élément vidéo YouTube
L'élément vidéo YouTube vous permet d'intégrer une vidéo à partir d'une URL YouTube. Cet élément vous offre toutes les options d'affichage proposées par la fonction d'intégration de YouTube, y compris la possibilité de montrer des vidéos associées d'une chaîne, de définir une heure de début spécifique, d'afficher ou de masquer les contrôles vidéo, et plus encore. En savoir plus sur l'élément vidéo YouTube.
Élément vidéo de fond
L'élément vidéo de fond vous permet d'ajouter des arrière-plans animés sans audio. Contrairement à l'élément vidéo qui ne prend en charge que les liens YouTube et Vimeo, l'élément vidéo de fond peut accepter n'importe quel fichier vidéo que vous téléchargez. Les éléments vidéo de fond sont également dotés d'un bouton de lecture/pause intégré pour que les visiteurs du site puissent lire ou mettre en pause la vidéo de fond à leur guise. En savoir plus sur l'élément vidéo de fond.
Élément Lightbox
L'élément lightbox permet aux visiteurs du site d'ouvrir une vidéo dans une fenêtre modale. Semblable à l'élément vidéo, le lightbox prend en charge les liens YouTube et Vimeo. En savoir plus sur l'élément lightbox.
Élément de texte enrichi et champ de texte enrichi
L'élément de texte enrichi vous permet également d'ajouter des vidéos. Cela devient encore plus puissant lorsque vous l'utilisez pour extraire les données d'un champ de texte enrichi dans une Collection CMS. Alternativement, vous pouvez également utiliser un élément vidéo pour extraire dynamiquement les données du champ vidéo d'une Collection. En savoir plus sur les champs vidéo de Collection.
Comment intégrer des vidéos en utilisant du code personnalisé
Vous pouvez également ajouter des vidéos HTML en utilisant l'élément d'intégration :
- Allez dans le Panneau Ajouter
- Faites glisser un élément d'intégration sur le canevas
- Collez votre code vidéo (En savoir plus sur les éléments vidéo en HTML)
- Cliquez sur Enregistrer & fermer