Introduction
Utilisation de Sitely
Éléments
Comment faire
Un tutoriel vidéo est disponible pour ce sujet Cliquez ici pour le visionner
Ajouter une vidéo à votre page web est très simple, tout le gros du travail étant pris en charge par l’élément Vidéo. Ajoutez simplement l’élément sur la toile, ou faites glisser un fichier vidéo MP4/MOV directement sur la toile. Lorsque l’élément est placé, il ressemble à ceci — c’est l’espace réservé de vidéo.
Si vous avez fait glisser une vidéo sur la toile, elle apparaîtra comme un lecteur vidéo, avec son image d’affiche. Il ne vous reste plus qu’à styliser l’interface du lecteur et à le positionner/redimensionner pour l’adapter à votre page web.
Avec l’option d’espace réservé, vous devrez ajouter un fichier source à cet espace pour qu’il apparaisse comme un lecteur vidéo. Vous faites cela depuis le panneau de style bien connu de Sitely.
Vous avez le choix entre plusieurs sources vidéo. Celles-ci sont toutes proposées via les options du menu déroulant dans le panneau de style. Les options YouTube et Vimeo vous permettent d’intégrer des vidéos depuis ces plateformes de streaming populaires. Il vous suffit de saisir l’URL ou l’ID de la vidéo que vous souhaitez afficher. Si vous choisissez l’option ‘Depuis le disque’, vous pourrez sélectionner un fichier vidéo sur votre disque dur. Sélectionner l’option ‘Depuis un emplacement réseau’ vous permettra d’entrer l’URL d’un fichier vidéo hébergé sur un serveur tiers.
Vous devez ensuite décider où vous souhaitez stocker votre fichier vidéo. Avec les options de streaming, vous n’avez pas à faire ce choix — la vidéo restera sur le serveur et sera diffusée en streaming vers votre page web. Toutefois, si vous ajoutez une vidéo depuis votre disque local, vous avez la possibilité de la laisser à son emplacement actuel sur votre disque dur, ou de l’intégrer au fichier de projet Sitely. Vous pouvez souhaiter l’intégrer au projet si vous avez l’intention de continuer à travailler sur votre page depuis un autre ordinateur à l’avenir, ou s’il existe une possibilité que votre fichier vidéo soit déplacé vers un autre emplacement. L’intégration garantira que le fichier est toujours accessible par le projet, mais alourdira votre fichier de projet Sitely.
L’option Image d’affiche vous permet de sélectionner une scène de votre vidéo pour servir d’image d’affiche. Si vous préférez utiliser une image entièrement personnalisée, vous avez la possibilité d’en ajouter une plus bas dans le panneau de style.
La section Options du panneau de style est l’endroit où vous décidez comment votre vidéo se lit et à quoi doit ressembler le lecteur pour vos visiteurs.
L’option ‘Démarrer automatiquement’ lance votre vidéo dès qu’elle est chargée dans la page. Cependant, si vous activez cette option, sachez que la vidéo sera lue sans audio (elle sera automatiquement en sourdine). L’option Lecture en boucle fera boucler la vidéo afin qu’elle ne s’arrête jamais — lorsqu’elle arrive à la fin, elle reprend au début. L’option ‘Lire lors du défilement’ lit la vidéo à mesure que l’utilisateur fait défiler la page — il s’agit d’une sorte de ‘scrubber’ vidéo qui fait avancer la vidéo au rythme du défilement.
Cocher la case ‘Contrôles du lecteur’ vous donne une flexibilité maximale quant au style de votre lecteur vidéo. L’option ‘Sur la vidéo’ crée un lecteur vidéo familier avec tous les contrôles clairement visibles dans l’interface du lecteur. Vous pouvez sélectionner quels éléments de l’interface de contrôle sont visibles pour les utilisateurs, ainsi que choisir une couleur d’accent. L’autre option consiste à utiliser ‘Intégrés au navigateur’. Cela laisse le navigateur de l’utilisateur styliser l’interface vidéo. C’est également dans cette section que vous pouvez ajouter une image d’affiche personnalisée si vous souhaitez en utiliser une.
Vient ensuite le choix du mode d’intégration de votre vidéo. Les options sont :
Intégration directe : intègre la vidéo à sa taille actuelle directement dans la page web. La vidéo peut être lue sur la page en activant simplement les contrôles du lecteur.
Image fixe + intégration : crée une image fixe sur la page, la vidéo n’étant chargée et activée qu’au clic. Cela peut améliorer le temps de chargement initial de la page, mais le démarrage de la vidéo peut être retardé.
Image fixe + intégration dans une lightbox : semblable à ‘Image fixe + intégration’, sauf que le lecteur vidéo s’ouvrira dans une lightbox lorsque l’image fixe est cliquée.
Dans l’onglet Disposition, à droite de l’interface, se trouve une autre option qui vous permet d’utiliser la vidéo de manière plus créative. Par exemple, vous pouvez définir une vidéo en Pleine largeur de page. Cette option fait essentiellement s’étendre la vidéo sur toute la largeur de la fenêtre du navigateur. C’est une excellente option pour créer des en-têtes vidéo et des sections hero pour vos pages.
Voici à quoi ressemble un en-tête vidéo en pleine largeur sur la page. En substance, la vidéo prend l’apparence d’un élément d’arrière-plan d’un large bloc. Utilisée de cette manière, la vidéo n’aura aucun contrôle — elle est conçue pour se lancer automatiquement et boucler ; de ce fait, elle sera en sourdine si elle contient une bande-son. La vidéo elle-même s’étendra sur toute la largeur du navigateur, tandis que sa hauteur sera dictée par la taille que vous donnez au bloc sur la toile. La vidéo ne sera jamais déformée — elle sera plutôt rognée en haut et en bas pour n’afficher que la portion visible du bloc.
Dans certains cas, vous pouvez souhaiter ajouter une vidéo comme élément d’arrière-plan à une page entière. Sitely y parvient via l’onglet Page à droite de l’interface. Faites simplement défiler jusqu’à la section Arrière-plan de l’onglet Page et choisissez Vidéo comme contenu d’arrière-plan — vous aurez les mêmes options pour choisir un fichier source.
Maintenez des fichiers légers — choisissez des vidéos adaptées à la lecture en boucle et supprimez toute piste audio. Idéalement, les vidéos d’arrière-plan devraient faire moins de 10 Mo.
Il n’est pas forcément conseillé d’utiliser des services de streaming pour délivrer du contenu d’arrière-plan — surtout si le service a tendance à diffuser de la publicité avec votre vidéo. Pour la plupart des vidéos d’arrière-plan, il est préférable d’héberger votre propre vidéo sur votre serveur — utilisez les options ‘Depuis le disque’ ou ‘Emplacement réseau’.
Lorsque vous ajoutez une vidéo comme élément d’arrière-plan, elle est placée sur la page à la pleine largeur du navigateur — sa hauteur est définie proportionnellement au ratio d’aspect de la vidéo. Ainsi, la taille réelle de la vidéo sur la page variera selon la largeur de la fenêtre du navigateur du visiteur. Lorsque la page défile, la vidéo défile également, comme les autres éléments de la page.
Si vous souhaitez que votre vidéo reste en place à la hauteur et à la largeur complètes du navigateur, cochez l’option Position fixe. Cela recouvrira la fenêtre de navigateur disponible avec le contenu vidéo et le fixera en position. Le contenu de la page se déplacera au-dessus de la vidéo lors du défilement.
Parfois, il peut être nécessaire d’intégrer de petits éléments animés dans un site web, surtout lorsque la panoplie d’options d’animation existantes de Sitely ne suffit pas. C’est particulièrement vrai pour des éléments comme de petites publicités animées ou des titres percutants, que l’on trouve couramment sur Internet et les réseaux sociaux. Bien que Sitely ne soit pas conçu comme une application de montage vidéo, il propose un élément vidéo polyvalent qui intègre facilement la vidéo dans les pages web.
Contrairement à certains autres constructeurs de sites, Sitely vous libère des ratios d’aspect vidéo standard lors de l’intégration d’un lecteur à votre page. L’élément vidéo s’ajuste sans effort au ratio d’aspect de la vidéo qu’il contient. Ainsi, si vous pouvez créer des éléments vidéo, Sitely excelle à les gérer.
Prenons l’exemple suivant : imaginez un titre avec un mot qui change dynamiquement en son milieu. Pour obtenir cet effet, nous avons utilisé une application de montage vidéo, comme CapCut, gratuit et vivement recommandé. Concrètement, nous avons préparé une toile suffisamment grande pour accueillir la taille de texte souhaitée pour notre titre. Après avoir ajouté et stylisé le texte, ainsi que des transitions animées, nous avons généré une petite vidéo MP4. Cette vidéo a ensuite été compressée avec HandBrake pour l’optimiser pour le web.
Dans Sitely, nous avons construit le titre avec du texte standard et intégré de manière fluide la petite vidéo. Le résultat final est visuellement engageant et dynamique.
Nous créons de superbes
Sites web avec SitelySitely
En combinant des éléments Sitely standard tels que le texte, les boîtes, les icônes et la vidéo, vous pouvez facilement ajouter un peu de mouvement supplémentaire à votre page. Voici un autre exemple.
Jetez
Un
Œil
Et que dire de ces vidéos de type story que vous voyez sur Instagram, etc. ? Elles peuvent également être ajoutées à votre page web pour créer une expérience plus engageante pour vos visiteurs
Dans tous les exemples ci-dessus, les vidéos n’ont pas de bande sonore ; elles ont donc été configurées pour se lancer automatiquement et boucler. Si vous comptez utiliser des clips vidéo de cette manière, voici quelques règles générales. Gardez des fichiers de petite taille. Utilisez l’option ‘Depuis le disque’ — clairement, ce type de clips se prête mal à une diffusion via des sites de partage de vidéos. Ils peuvent, bien sûr, être diffusés depuis un emplacement réseau si vos vidéos sont hébergées sur votre serveur web. Enfin, n’en faites pas trop avec cette technique — l’excès peut agacer vos visiteurs ; veillez donc à avoir une raison précise d’ajouter cette couche supplémentaire d’animation.
Des coins arrondis sur les vidéos peuvent donner à votre contenu vidéo l’apparence des autres éléments de page, créant un rendu plus homogène pour vos pages. Voici quelques exemples de contenu vidéo avec arrondi des coins appliqué. L’option se trouve dans le panneau de style lorsque votre vidéo est sélectionnée sur la toile.
Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !
Mis à jour pour Sitely 6
Droits d'auteur ©2025 Crinon SRL
Ce site utilise des cookies.
Veuillez consulter notre politique de confidentialité pour en savoir plus.
