Ajouter une vidéo (YouTube, Vimeo, fichier mp4) sur une page
Intégrer facilement un contenu vidéo immersif
Points clés
• Intégration simple depuis le Designer
• Support YouTube, Vimeo et fichiers mp4
• Idéal pour présenter votre hôtel de manière immersive
• Paramétrage rapide pour un affichage optimal
Intégrer une vidéo sur votre site hôtelier est un excellent moyen d’enrichir l’expérience utilisateur : présentation de votre établissement, visite immersive des chambres, mise en avant du spa, du restaurant ou d’un événement. Webflow permet d’ajouter une vidéo hébergée (YouTube, Vimeo) ou un fichier mp4 en quelques étapes.
Ajouter une vidéo YouTube ou Vimeo
Ouvrez le Designer et glissez le bloc Video dans votre section. Dans la zone d’options, collez l’URL de votre vidéo YouTube ou Vimeo.
La vidéo s’intègre automatiquement au format responsive et s’adapte à toutes les tailles d’écran.
💡 Conseil : utilisez une vidéo courte (30–90 secondes) pour capter l’attention sans ralentir l’expérience de navigation.
Ajouter un fichier vidéo mp4
Si vous souhaitez utiliser votre propre fichier hébergé, sélectionnez le bloc Background Video pour créer un fond animé ou utilisez un Video Element si vous avez un lecteur avec contrôles.
Importez ensuite votre fichier mp4 via l’Asset Manager.
Ce format est idéal pour des arrière-plans animés ou des vidéos immersives silencieuses sur la page d’accueil.
Optimiser la vidéo pour les performances
Évitez les fichiers trop lourds qui pourraient ralentir la page.
• Taille recommandée : moins de 10 Mo
• Longueur idéale : 5–15 secondes pour les backgrounds
• Format : mp4 en H.264 ou WebM pour les versions optimisées
Pour les vidéos hébergées sur YouTube ou Vimeo, pensez à désactiver les vidéos similaires dans les paramètres d’intégration pour éviter les suggestions non pertinentes.
Ajuster l’affichage sur mobile
Certaines vidéos de fond ne s’affichent pas sur mobile pour préserver la performance.
Dans ce cas, ajoutez une image de secours (fallback image) dans les options de votre bloc vidéo.
Pour les vidéos classiques, vérifiez l’affichage responsive dans le Designer pour garantir une expérience fluide.
Publier votre modification
Prévisualisez la page, contrôlez le comportement de la vidéo sur desktop et mobile, puis cliquez sur Publish pour rendre vos ajustements visibles.
Conclusion
Ajouter une vidéo permet de renforcer l’attractivité de votre site hôtelier et d’offrir une expérience plus immersive. Une intégration propre, optimisée et cohérente avec votre identité visuelle valorise votre établissement et capte davantage l’attention des visiteurs.