Ajoutez des effets visuels intéressants avec des vidéos qui s’affichent automatiquement en arrière-plan du contenu de votre site.

Un des moyens de personnaliser le style de l’arrière-plan de votre site consiste à utiliser des vidéos pour créer un effet visuel dynamique. Par exemple, vous pouvez ajouter du texte et des images sur des vidéos d’arrière-plan pour ajouter plus de dimension et de contenu dynamique à vos pages. Ces vidéos sont diffusées en boucle et sont silencieuses. Pour les vidéos d’arrière-plan, vous pouvez :

• utiliser des vidéos YouTube et Vimeo sur des sections de page, des bannières et d’autres zones, selon la version de votre site ;
• importer des vidéos dont vous êtes le propriétaire dans les arrière-plans de section de la version 7.1.

Pour un aspect et une impression personnalisés, vous pouvez également appliquer des filtres personnalisés et des couleurs de superposition.

Découvrez toutes vos options de style d’arrière-plan dans l’article Personnaliser l’arrière-plan de votre site.

Remarque : Vous pouvez également ajouter des arrière-plans animés avec des effets sur les images et des motifs d'arrière-plans uniques. Pour en savoir plus, consultez l'article sur la Section des images d'arrière-plan et la Section des motifs d'arrière-plan.

Regarder une vidéo

Avant de commencer

Remarques générales

• Votre service d’hébergement de vidéos est responsable de la qualité et de la résolution de vos vidéos diffusées en continu. La qualité de la diffusion n’est pas du ressort de Squarespace. Si vos vidéos vous semblent de mauvaise qualité, suivez nos conseils de design.
• Les vidéos chargées sur Squarespace peuvent s’afficher en 1080p ou 360p en fonction de l’appareil, du navigateur et de la connexion Internet. Il n’est pas possible de sélectionner manuellement la résolution.
• Même si les vidéos d’arrière-plan qui suivent nos conseils de design doivent s’afficher sur les ordinateurs, il est possible que la vidéo ne s’affiche pas sur les appareils mobiles, en fonction du débit du visiteur et de la version de son navigateur. Définissez une image de remplacement pour appareil mobile qui s’affichera si la vidéo d’arrière-plan ne peut pas être chargée.
• La couleur d’arrière-plan de la page ou la couleur de superposition de la bannière s’affiche pendant la mise en mémoire tampon de la vidéo. Si le chargement de la vidéo prend quelques secondes, l’image de remplacement pour appareil mobile peut s’afficher. Le temps de chargement dépend de votre connexion internet.
• Bien que les vidéos d’arrière-plan prennent en charge les URL YouTube et Vimeo, elles ne prennent pas en charge l’ajout de code d’intégration.
• Les vidéos ne fonctionneront pas en arrière-plan sur les appareils en mode faible consommation ou économie d’énergie. Si vous ajoutez une image de remplacement pour appareil mobile, cette dernière s’affichera. Si vous n’en ajoutez aucune, une miniature de la vidéo et un bouton de lecture inactive s’afficheront.

YouTube

• Désactivez les annonces en superposition, sans quoi elles s'afficheront par-dessus la vidéo d'arrière-plan.
• Il est possible que vos visiteurs voient brièvement un logo YouTube, le titre de la vidéo, une icône de lecture ou une icône de partage lors du chargement de la vidéo. Cela dépend de la disposition et de l'appareil.
• Les publicités diffusées avant la vidéo, également appelées publicités pre-roll, ne seront pas visibles sur les vidéos d'arrière-plan.

Vimeo

• Pour ajouter une vidéo d’arrière-plan provenant de Vimeo, vous devez disposer d’un forfait Vimeo payant.
• Il n‘est pas possible d‘ajouter des vidéos HD Vimeo aux pages de couverture ou aux bannières.

Conseils de design

Les vidéos d’arrière-plan sont un excellent moyen de rendre votre site plus intéressant d’un point de vue visuel, mais elles ne doivent pas détourner l’attention du visiteur du reste du contenu de votre site. Voici quelques bonnes pratiques pour améliorer l’apparence de votre vidéo d’arrière-plan. Si vous chargez une vidéo d’arrière-plan, découvrez nos règles en matière de vidéo.

Lorsque vous envisagez d'utiliser des vidéos en arrière-plan, suivez ces conseils :

Conseil	Remarques
Optez pour un fichier vidéo court	La durée des vidéos intégrées n'est pas limitée. Pour les vidéos téléchargées, la durée limite est de 60 secondes. Pensez aux facteurs de durée et de résolution de la vidéo pour la taille du fichier vidéo. Le chargement des fichiers vidéo volumineux est plus long et les vidéos peuvent être interrompues en cours de diffusion, selon la qualité de la connexion du visiteur. À retenir : La fréquence d'images idéale est d'environ 60 images par seconde, surtout si la vidéo s'affiche au ralenti. Si votre vidéo apparaît floue sur les appareils mobiles, essayez d’augmenter la fréquence d’images à plus de 60 images par seconde, puis chargez à nouveau la vidéo. La durée idéale d’une vidéo est de moins de 40 secondes. La couleur d'arrière-plan s'affiche de manière plus fréquente lorsque des vidéos plus courtes sont lues en boucle. Utilisez une résolution de 1080p et un débit d'au moins 3 Mbps. Lorsque vous filmez des vidéos, limitez le mouvement de la prise de vue ou le mouvement des objets dans la prise de vue. Moins de mouvements se traduit souvent par des vidéos d'arrière-plan plus fluides.
Utilisez une valeur de proportion large	Les arrière-plans des sections se redimensionnent automatiquement en fonction du contenu et de la taille de la fenêtre du navigateur du visiteur. Pour réduire le recadrage, utilisez des vidéos avec une valeur de proportion horizontale ou paysage, comme le 16:9 par exemple. Essayez de trouver ou d’enregistrer des vidéos dans lesquelles le sujet de la vidéo est centré et comporte un espace autour duquel il est possible de le recadrer en toute sécurité.
Limitez le nombre de vidéos d’arrière-plan par page	Ajoutez deux vidéos d’arrière-plan maximum par page. Ainsi, vous réduirez la taille de votre page, ce qui accélèrera les temps de chargement.
Choisissez des vidéos avec des transitions fluides	Pour que vos vidéos restent accessibles, évitez que le contenu de votre vidéo clignote trois fois ou plus en une seconde. Pensez aux transitions et évitez les coupures subites ou les effets panoramiques excessifs. Les vidéos saccadées attirent trop l'attention et peuvent être dérangeantes pour les visiteurs.
Contraste avec le texte	Modifiez la couleur de la police. Par exemple, si la vidéo est principalement sombre, choisissez une couleur de police plus claire pour le texte superposé. Modifiez la luminosité de la vidéo à l'aide de filtres. Pour en savoir plus sur le contraste des couleurs, consultez la page Rendre votre site Squarespace plus accessible.

Étape 1 - Préparer votre fichier vidéo ou votre URL

Pour ajouter une vidéo d’arrière-plan, vous pouvez charger votre fichier vidéo dans un arrière-plan de section dans la version 7.1. Vous pouvez également charger votre vidéo sur YouTube ou Vimeo et trouver son URL pour la partager.

Remarque : vérifiez que lʼURL nʼinclut pas dʼhorodatage pour une section spécifique de la vidéo, car cela empêcherait son chargement.

Importer une vidéo

Pour préparer votre fichier vidéo avant de l’importer, vérifiez que votre vidéo répond à nos exigences en matière de vidéos importées. Notez que la durée maximale des vidéos d’arrière-plan importées est de 60 secondes.

YouTube

1. Connectez-vous à votre compte YouTube ou créez-en un.
2. Chargez une vidéo ou recherchez-en une déjà disponible.
3. Assurez-vous que la vidéo est définie sur Non répertorié ou Public et autorise l'intégration .
4. Copiez l'URL de partage de la vidéo.

Vimeo

1. Connectez-vous à votre compte Vimeo ou créez-en un.
2. Chargez une vidéo ou recherchez-en une déjà disponible.
3. Assurez-vous que les paramètres de confidentialité de la vidéo sont définis sur Publique ou Masquer sur Vimeo. Autorisez l’intégration N’importe où ou sur des domaines spécifiques. Si vous choisissez d’autoriser l’intégration uniquement sur des domaines spécifiques, assurez-vous d’ajouter le domaine de votre site web dans le champ de texte qui s’affiche.
4. Copiez l'URL de partage de la vidéo.

Étape 2 - Ajouter la vidéo

Les étapes pour ajouter une vidéo dépendent de la version de votre site et de l'endroit où vous ajoutez la vidéo.

Remarque : tant que votre URL n’est pas ajoutée, une courte vidéo d’un océan s’affichera en guise d’espace réservé de démonstration.

Écran de verrouillage

Vous pouvez ajouter une vidéo d’arrière-plan à votre écran de verrouillage plutôt qu’une image ou un diaporama. Tous les sites prennent en charge les écrans de verrouillage.

Pour ajouter une vidéo à un écran de verrouillage, procédez de la façon suivante :

1. Ouvrez le panneau Écran de verrouillage.
2. Cliquez sur Écran de verrouillage.
3. Cliquez sur Médias.
4. Cliquez ensuite sur l'onglet Vidéo.
5. Collez l'URL de votre vidéo dans le champ URL de la vidéo.

Étape 3 - Sélectionner une largeur d’arrière-plan

Les vidéos d’arrière-plan peuvent apparaître en pleine page ou en retrait des bords de la section.

• L'option Pleine page étend l'image d'un bord à l'autre de la fenêtre de votre navigateur, couvrant toute la largeur de votre site.
• L'option Insertion met l'image légèrement en retrait et crée un contour autour cette dernière.

Lorsque l’image est définie sur Insertion, vous pouvez définir la couleur du contour.

Étape 4 - Ajouter un filtre

Les filtres modifient l'apparence de la vidéo et lui confèrent un look stylisé. Les filtres affectent aussi l'image mobile de la vidéo. L'effet d'un filtre dépend de la couleur et de l'imagerie de la vidéo. Nous vous conseillons de faire des essais afin de trouver l'effet qui convient le mieux.

Pour ajouter un filtre, cliquez sur le menu déroulant Filtrer de l’onglet Vidéo. Pour tous les filtres sauf Inverser, vous pouvez régler l’intensité à l’aide du curseur. Les effets des filtres peuvent s’afficher différemment d’un navigateur à l’autre.

Vous pouvez utiliser le filtre Opacité pour ajouter une couleur de superposition. Cliquez sur l’onglet Couleurs pour sélectionner un thème de couleurs pour la superposition et le contenu ajouté. Pour en savoir plus, consultez l’article Modifier les couleurs. Si vous supprimez la vidéo, la superposition devient la couleur d’arrière-plan de la section.

Étape 5 - Modifier la vitesse de lecture

Si vous utilisez un lien URL YouTube ou Vimeo, vous pouvez modifier le paramètre sous Vitesse de lecture pour augmenter ou diminuer la vitesse de votre vidéo. La vitesse par défaut est 1x, ce qui signifie que la vidéo est lue à son rythme normal.

Étape 6 - Ajouter une image de remplacement pour appareil mobile

Les navigateurs mobiles prennent en charge les vidéos d’arrière-plan, mais selon la vitesse de connexion et la version du navigateur, il se peut que certains visiteurs ne puissent pas charger les vidéos en bannière. Vous pouvez définir une image de remplacement pour appareil mobile, qui apparaîtra lorsqu’une vidéo en bannière ne peut pas être chargée. Les filtres sont également appliqués à l’image de remplacement pour appareil mobile. Pour des résultats optimaux, mettez en forme votre image pour un affichage sur le web avant de la charger.

La méthode à suivre pour ajouter une image de remplacement pour appareil mobile dépend de la version de votre site. Pour ajouter une image de remplacement pour appareil mobile :

Remarque : ajoutez une image animée au format .gif en tant qu'Image de remplacement pour appareil mobile pour créer un effet similaire à la vidéo.

Désactiver ou supprimer la vidéo d’arrière-plan

Pour retirer une vidéo d’arrière-plan, vous pouvez la désactiver ou la supprimer. Pour désactiver une vidéo d’arrière-plan, remplacez-la par une image d’arrière-plan. L’image définie remplace alors la vidéo d’arrière-plan. Il n’est possible de supprimer des vidéos d’arrière-plan que sur les sites de la version 7.1. Si vous supprimez une vidéo, cela libère de l’espace de stockage vidéo sur votre site.

Visionner une vidéo (version 7.0)

Cette vidéo concerne la version 7.0 de Squarespace.