Comment réduire la taille des vidéos intégrées sur Webflow
Améliorer la performance et le design de votre site hôtelier
Points clés :
- Adapter la taille et la proportion d’une vidéo intégrée dans Webflow.
- Utiliser un conteneur responsive pour éviter les déformations.
- Optimiser le poids des vidéos pour une meilleure vitesse de chargement.
Intégrer des vidéos sur votre site Webflow est un excellent moyen de valoriser votre établissement, vos chambres ou l’expérience client. Cependant, une vidéo trop grande ou non optimisée peut ralentir votre site et impacter l’expérience utilisateur. Voici comment la redimensionner correctement.
Ajuster la taille avec un conteneur
Dans Webflow, placez toujours vos vidéos (YouTube, Vimeo ou uploadées) dans un Div Block.
- Sélectionnez votre vidéo intégrée.
- Glissez-la à l’intérieur d’un Div Block.
- Définissez une largeur maximale (ex. 800px) ou un pourcentage (ex. 70%) pour la rendre flexible.
💡 Astuce : utilisez le paramètre max-width: 100%; height: auto; pour que la vidéo s’adapte automatiquement à tous les écrans.
Utiliser un ratio responsive
Pour conserver de bonnes proportions, définissez un ratio 16:9 (format paysage classique).
Dans Webflow Designer :
- Sélectionnez le conteneur de la vidéo.
- Ajoutez une propriété padding-top: 56.25% pour maintenir le ratio.
- Positionnez la vidéo en absolute à l’intérieur du conteneur.
Compresser la vidéo avant intégration
Les fichiers lourds ralentissent le chargement, surtout sur mobile.
- Avant de la téléverser, compressez la vidéo avec des outils gratuits comme HandBrake ou Clipchamp.
- Réduisez la résolution à 1080p maximum et visez un poids inférieur à 20 Mo.
💡 Préférez une intégration YouTube ou Vimeo plutôt qu’un hébergement direct sur Webflow : cela réduit considérablement le poids de la page.
Contrôler le rendu sur mobile
Passez en vue Tablet et Mobile dans le Designer.
- Si la vidéo dépasse les bords, fixez une largeur de 100% et ajustez la hauteur automatiquement.
- Vous pouvez aussi masquer la vidéo sur mobile et afficher une image miniature avec un lien vers la vidéo complète.
Bonnes pratiques marketing hôtelier
- Choisissez une miniature attrayante illustrant votre établissement.
- Intégrez un bouton d’action juste sous la vidéo (“Réserver maintenant” ou “Voir les chambres”).
- Évitez les vidéos supérieures à deux minutes pour conserver l’attention des visiteurs.
Conclusion
Réduire la taille d’une vidéo intégrée dans Webflow, c’est améliorer à la fois la performance et la qualité visuelle de votre site hôtelier. Une vidéo bien dimensionnée renforce votre image de marque tout en offrant une navigation fluide sur tous les supports.