Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Ajouter des vidéos d’arrière-plan

Vous pouvez intégrer des vidéos d'arrière-plan hébergées sur YouTube et Vimeo aux sections de page, aux bannières et à d'autres zones, selon la version de votre site. Les vidéos d'arrière-plan sont lues en boucle sans le son et ajoutent un effet visuel dynamique à votre site. Pour un aspect personnalisé, vous pouvez appliquer des filtres stylisés et des couleurs de superposition.

Avant de commencer

Astuces générales

  • La couleur d’arrière-plan de la page ou la couleur de la 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.
  • Il arrive parfois que les bannières vidéo ne s'affichent pas sur appareil mobile, en fonction de la vitesse de connexion et de la version du navigateur utilisé par les visiteurs. Définissez une image de remplacement pour appareil mobile, qui apparaîtra lorsqu'une bannière vidéo ne peut être chargée.
  • Il n'y a pas de limite de temps pour les vidéos, même si les plus courtes peuvent afficher la couleur de fond plus souvent lorsqu'elles sont lues en boucle.
  • Les vidéos d’arrière-plan ne prennent pas en charge les codes d’intégration.

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

Conseils de Design

Les vidéos d'arrière-plan sont un bon moyen de rendre votre site plus intéressant d'un point de vue visuel, mais elles ne doivent jamais détourner l'attention de votre utilisateur du reste du contenu du site. Voici certaines des recommandations que vous pouvez utiliser pour faire en sorte que votre vidéo d'arrière-plan reste efficace.

Optez pour un fichier vidéo court

La durée et la résolution de la vidéo influent sur la taille du fichier vidéo. Les vidéos plus longues mettent plus de temps à charger et peuvent être interrompues en cours de diffusion, selon la qualité de la connexion du visiteur.

Bien qu'il n'y ait pas de limite de temps officielle, nous vous conseillons de créer des vidéos d'arrière-plan de moins de 40 secondes si cela est possible. Pour créer des vidéos courtes, vous pouvez notamment choisir du contenu qui repasse facilement en boucle. Cela peut donner l'impression que la vidéo est plus longue, mais cela prend moins d'espace.

Nous recommandons l'utilisation de vidéos avec :  

  • Une fréquence d'image de 25 images par seconde.
  • Une résolution de 720p, c'est-à-dire 1 280 x 720 pixels.

Choisissez un type de contenu aux transitions douces

Lorsque vous choisissez une vidéo, faites attention aux transitions afin d’éviter les coupures subites et les effets de panoramique. Les vidéos saccadées attirent trop l’attention et peuvent être dérangeantes.

Faites en sorte qu'il y ait un contraste avec le texte

Faites en sorte que votre vidéo d'arrière-plan soit compatible avec les divers styles de votre site, en particulier la couleur de tout Texte que vous positionnez au-dessus. Assurez-vous que les visiteurs peuvent lire votre texte à n'importe quel moment de la vidéo.

Si le contraste n'est pas suffisant, vous pouvez :

Étape 1 - Trouver l'URL de votre vidéo

Pour ajouter une vidéo d'arrière-plan, mettez-la en ligne sur Youtube ou Vimeo et trouvez son URL de partage. Il n'est pas possible de charger une vidéo directement sur Squarespace ou d'intégrer des vidéos hébergées par un autre service.

Conseil : assurez-vous que lʼURL nʼinclut pas dʼhorodatage pour une section spécifique de la vidéo, car cela empêchera le chargement.

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 N'importe qui et autoriser l'intégration N'importe où. Vous pouvez également choisir de Masquer cette vidéo de Vimeo.com et d'autoriser l'intégration Sur les sites de mon choix seulement.
  4. Copiez l'URL de partage de la vidéo.

Étape 2 - Ajouter la vidéo

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

Astuce : 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.

Arrière-plan des sections

Vous pouvez ajouter des vidéos d'arrière-plan dans toutes les sections, sauf celles des blogs, des événements et de la boutique. Pour ajouter une vidéo d'arrière-plan :

  1. Dans le Menu principal, cliquez sur Pages.
  2. Cliquez sur la page à laquelle vous souhaitez ajouter la vidéo, puis sur Modifier.
  3. Survolez la section et cliquez sur l’icône crayon.
  4. Cliquez sur Arrière-plan, puis sur Vidéo.
  5. Collez l’URL de votre vidéo dans le champ Vidéo.
  6. Faites défiler vers le bas pour personnaliser d’autres paramètres vidéo.
  7. Survolez Terminé et cliquez sur Enregistrer.

Bannière de page

Dans certains templates, vous pouvez ajouter une vidéo d’arrière-plan à la bannière d'une page Web. Cette méthode crée un excellent effet visuel si vous la combinez à des textes superposés.

  1. Dans le Menu principal, cliquez sur Pages.
  2. Survolez le titre de la page dans le panneau de gauche et cliquez sur “the.
  3. Cliquez sur l’onglet Médias.
  4. Dans l’onglet Médias, cliquez sur l’onglet Vidéo.
  5. Collez l'URL de votre vidéo dans le champ URL de la vidéo.

Templates compatibles

Dans ces familles de templates, vous pouvez ajouter des bannières vidéo aux types de page suivants :

  • Adirondack : Disposition, Produits, Album, Événements, Blog
  • Bedford : Disposition, Produits, Album, Événements, Blog
  • Brine : Disposition, Album, Événements, Blog
  • Five : Disposition, Album, Événements, Blog
  • Montauk - Disposition, Événements, Blog, Index (doit avoir une image de remplacement pour appareil mobile)
  • Pacific : Disposition, Produits, Album, Événements, Blog
  • Tremont : Disposition, Produits, Album, Événements, Blog
  • York - Disposition, Produits, Album, Événements, Blog, Projet, Index

Bannières vidéo sur des pages d’un index

Vous pouvez ajouter des bannières vidéo aux pages de l’index dans ces familles de templates :

  • Bedford
  • Brine
  • Montauk
  • Pacific
  • York

Pour ajouter la vidéo :

  1. Ouvrez les paramètres de la sous-page.
  2. Cliquez sur Médias, puis sur Vidéo.
  3. Suivez les étapes ci-dessus pour ajouter l’URL de la vidéo.

Arrière-plan d'une Page de Couverture

Pour ajouter la vidéo à une Page de Couverture.

  1. Ouvrez une Page de Couverture existante ou créez-en une.
  2. Cliquez sur Médias.
  3. Dans le panneau Media, cliquez sur l'onglet Video.
  4. Collez l'URL de partage de votre vidéo dans le champ URL de la vidéo.

Dispositions compatibles

Dans la plupart des dispositions de Pages de Couverture, les vidéos sont diffusées sur toute la page, derrière le contenu et s'étendent jusqu'aux limites du navigateur.

Il existe quelques exceptions :

  • Affichage dans le panneau latéral : Backstory, Flash, Spotlight, Session, Vignette
  • Affichage dans la zone de portrait circulaire : Focus, Monocle
  • Vidéos non prises en charge : Flagship, Harbor

Écran de verrouillage

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

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

  1. Dans le Menu principal, cliquez sur Design.
  2. Cliquez sur Écran de verrouillage.
  3. Cliquez sur Médias.
  4. Cliquez ensuite sur l'onglet Vidéo.
  5. Puis, collez l'URL de votre vidéo dans le champ URL de la vidéo.

Étape 3 - 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 ajuster lʼintensité à lʼaide du curseur. Les effets de filtre peuvent avoir un rendu différent dʼun navigateur à lʼautre.

Étape 4 - Modifier la vitesse de lecture (YouTube uniquement)

Si vous utilisez l'URL d'une vidéo YouTube, vous pouvez sélectionner une Vitesse de Lecture afin de modifier la rapidité de votre vidéo. La vitesse par défaut est x 1, ce qui signifie que la vidéo défilera à son rythme normal.

Étape 5 - Ajouter une image de rechange mobile

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

La méthode utilisée 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 :

  1. Cliquez sur  Modifier, puis sur l'icône crayon de la section contenant la vidéo d'arrière-plan.
  2. Cliquez sur Arrière-plan, puis sur Vidéo
  3. Dans Image de remplacement pour appareil mobile, cliquez sur  Ajouter une imagepour charger une image, ou cliquez sur Rechercher des images pour réutiliser une image ou pour ajouter une image d’archive.
  4. Survolez Terminé et cliquez sur Enregistrer.

L'image de remplacement pour appareil mobile s'affiche également pendant le chargement de la vidéo.

Si vous n’ajoutez pas d’image de remplacement pour appareil mobile, une couleur d’arrière-plan apparaîtra sur les appareils mobiles. Vous pouvez définir cette couleur dans les couleurs de section .

  1. Dans l'onglet Vidéo du panneau Médias, faites défiler vers le bas jusqu'à Image de remplacement pour appareil mobile.
  2. Cliquez sur Charger une image ou sur Rechercher une image pour réutiliser une image ou  ajouter une image d’archive.
  3. Cliquez sur Enregistrer.

Si vous n’ajoutez pas d’image de remplacement pour appareil mobile, une couleur d’arrière-plan apparaîtra sur les appareils mobiles. Vous pouvez définir cette couleur dans les familles de templates suivantes :

  • Adirondack : ajustement Couleur d’arrière-plan du contenu
  • Bedford : ajustement Couleur de superposition de la bannière
  • Brine : ajustement Couleur de superposition
  • Five  : ajustements Couleur de superposition de la bannière et Arrière-plan de l’en-tête
  • Montauk : ajustement Arrière-plan de la zone de contenu
  • Pacific : ajustement Couleur de superposition
  • Tremont : ajustement Couleur d’arrière-plan du site
  • York : ajustement Couleur d’arrière-plan

Pour les pages de couverture, utilisez l’ajustement Arrière-plan : Couleur.

Astuce : 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 la vidéo d'arrière-plan

Pour désactiver la vidéo d'arrière-plan, remplacez-la par une image d'arrière-plan. L'image définie remplacera la vidéo d'arrière-plan.

  1. Cliquez sur Modifier, puis sur l'icône crayon de la section contenant la vidéo. 
  2. Cliquez sur Arrière-plan, puis sur Image.
  3. Cliquez sur Enregistrer.
  1. Dans le panneau Pages , survolez le titre de la page dans le panneau de gauche et cliquez sur “the.
  2. Cliquez sur Médias, puis sur Image.
  3. Cliquez sur Enregistrer.

Si vous utilisez une page de couverture, vous pouvez également sélectionner Aucune pour remplacer la vidéo par une couleur d’arrière-plan.

Regarder une vidéo

Cette vidéo concerne la version 7.0 de Squarespace.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 174 sur 355
Ajouter des vidéos d’arrière-plan