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 ou Vimeo aux pages de couverture et aux bannières de page de certains modèles. Les vidéos d’arrière-plan sont lues en boucle sans le son, ce qui vous permet d’ajouter un effet visuel dynamique à votre site.

Les vidéos d'arrière-plan proviennent d'URL de partage de Vimeo ou YouTube. Pour un effet personnalisé, vous pouvez ajouter des filtres stylisés et superposer des couleurs.

Regarder une vidéo

Cette vidéo concerne la version 7.0 de Squarespace.

Avant de commencer

Astuces générales

  • La couleur d'arrière-plan de la page ou la couleur de filtre de la bannière s'affichera pendant la mise en mémoire tampon de la vidéo. Si la vidéo met plus de temps à se charger, l'image de substitution mobile s'affichera. 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 arrière-plans vidéo ne prennent pas en charge le code d'intégration.

YouTube

  • Définissez la vidéo comme Publique / Non répertoriée et autorisez l'incorporation. Les vidéos YouTube privées ne s'affichent pas en tant que vidéos d'arrière-plan.
  • Désactivez les publicités superposées. Si elles sont activées pour votre vidéo d'arrière-plan, ces publicités apparaîtront par-dessus celle-ci.
  • Selon la disposition que vous choisissez et l’appareil utilisé par les visiteurs, un logo YouTube peut momentanément s’afficher en bas à droite de la vidéo. Vous pouvez rendre le logo plus discret en appliquant le filtre Flou à votre vidéo.
  • 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 Plus ou supérieur.
  • Modifiez vos paramètres de confidentialité Vimeo afin de vous assurer que vos vidéos peuvent être intégrées. Définissez la vidéo comme Visible par tous et autorisez l'intégration n'importe où. Les vidéos Vimeo privées ne pourront pas être utilisées comme vidéos d'arrière-plan.
  • 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.

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 d'ajouter une vidéo directement sur Squarespace ou d'intégrer des vidéos hébergées par un autre service.

YouTube

  1. Connectez-vous à votre compte YouTube ou créez-en un.
  2. Mettez une vidéo en ligne ou recherchez-en une déjà disponible.
  3. Assurez-vous que la vidéo est définie sur Non répertoriée / Publique et que l'incorporation est autorisée.
  4. Copiez l'URL de partage de la vidéo.

Vimeo

  1. Connectez-vous à votre compte Vimeo ou créez-en un.
  2. Mettez une vidéo en ligne ou recherchez-en une déjà disponible.
  3. Assurez-vous que la vidéo est définie sur Visible par tous et que l'incorporation est autorisée.
  4. Copiez l'URL de partage de la vidéo.

Étape 2 - Ajouter la vidéo

La marche à suivre pour ajouter une vidéo est différente pour les bannières de pages de site web et pour les pages de couverture. Suivez les étapes ci-dessous en fonction de la destination de votre 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.

Bannière de page

Dans certains modèles, vous pouvez remplacer l’image de bannière statique d’une page web par une vidéo d’arrière-plan. Cette méthode crée un excellent effet visuel si vous la combinez avec des textes superposés.

La méthode pour ajouter une vidéo à la bannière de votre page dépend de la version Squarespace qu’utilise votre site.

  1. Dans le Menu Principal, cliquez sur Pages.
  2. Survolez le titre de la page dans le panneau de gauche et cliquez sur [l’icône engrenage].
  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 Video URL (URL de la vidéo).
  6. Cliquez sur Save (Enregistrer).
  1. Dans le Menu Principal, cliquez sur Pages.
  2. Cliquez sur la page à laquelle vous souhaitez ajouter une bannière, puis cliquez sur Modifier.
  3. Ajoutez une section de bloc et cliquez sur son 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. Cliquez sur Save (Enregistrer).

Templates compatibles

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

  • Adirondack : Disposition, Produit, Album, Événements, Blog
  • Bedford : Disposition, Produit, 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, Produit, Album, Événements, Blog
  • Tremont : Disposition, Produit, Album, Événements, Blog
  • York : Disposition, Produit, Album, Événements, Blog, Projet, Index
  • Version 7.1 : sections de blocs pour toutes les pages

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.
  • Pour les sites à Page de Couverture unique : dans le Menu Principal, cliquez sur Media (Média).
  • Pour les Pages de Couverture ajoutées à des sites Web ou à des boutiques : dans le Menu Principal, cliquez sur Pages.
  • Cliquez sur Media (Média).
  • Dans la section Media, cliquez sur l'onglet Video.
  • Collez l'URL de partage de votre vidéo dans le champ Video URL (URL de la vidéo).
  • Modèles compatibles

    Dans la plupart des modèles 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 cependant des exceptions. Ces modèles diffusent les vidéos différemment :

    • 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

    Ecran verrouillé

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

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

    1. Dans le Menu Principal, cliquez sur Design.
    2. Cliquez sur Lock Screen (Écran verrouillé).
    3. Cliquez sur Media (Média).
    4. Cliquez ensuite sur l'onglet Video (Vidéo).
    5. Puis, collez l'URL de votre vidéo dans le champ Video URL (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 Filter (Filtre) dans l'onglet Video (Vidéo) et choisissez parmi les options suivantes :

    • Blur (Flou)
    • Brightness (Luminosité)
    • Contrast (Contraste)
    • Invert (Inverser)
    • Opacity (Opacité)
    • Saturate (Saturer)
    • Sepia (Sépia)

    Pour tous les filtres à l'exception de Invert (Inverser), vous pouvez ajuster l'intensité à l'aide du curseur.

    Remarque : les effets des filtres peuvent varier 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. Vous avez le choix parmi quatre vitesses :

    • x 0,5 (lent)
    • x 1 (normal)
    • x 1,5 (rapide)
    • x 2 (très rapide)

    É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 télécharger.

    La méthode pour ajouter une image de remplacement pour appareil mobile dépend de la version de Squarespace qu’utilise votre site.

    1. Dans la section Media, cliquez sur l'onglet Video.
    2. Faites défiler l’écran vers le bas et faites glisser votre image dans l’outil de chargement d’image. Vous pouvez également utiliser une image d’archive.
    3. Cliquez sur Save (Enregistrer).
    1. Dans la section que vous modifiez, cliquez sur l’icône crayon
    2. Cliquez sur Arrière-plan, puis sur Vidéo
    3. Faites défiler l’écran vers le bas et faites glisser votre image dans l’outil de chargement d’image. Vous pouvez également utiliser une image d’archive.
    4. Cliquez sur Save (Enregistrer).

    Dans la version 7.1, l'image de remplacement pour appareil mobile s'affiche également pendant le chargement de la vidéo.

    Conseil : ajoutez une image animée au format .gif en tant qu'Image Mobile pour créer un effet similaire.

    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 modèles 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 du canvas
    • 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.

    Étape 6 - Ajouter un filtre de couleur (Page de Couverture uniquement)

    Les filtres ajoutent une teinte aux vidéos d'arrière-plan des Pages de Couverture. Par défaut, une nuance de gris complète votre vidéo. Étant donné que les effets visuels de ces paramètres dépendent de la présence ou non d'effets sur votre vidéo d'origine, nous vous recommandons d'explorer les différentes couleurs et divers modes de fusion pour trouver la combinaison qui convient le mieux à votre vidéo.

    Pour modifier la couleur du filtre  :

    1. Dans la section Page de Couverture ou dans le Menu Principal, cliquez sur Style.
    2. Faites défiler vers le bas jusqu'à Video Background (Vidéo d'Arrière-Plan).
    3. Cliquez sur Custom Overlay Color (Couleur Filtre Personnalisée).
    4. Choisissez une nouvelle couleur dans la palette.
    5. Vous pouvez également sélectionner un Overlay Color Blend Mode (Mode de Fusion de Couleur Filtre) dans le menu déroulant pour modifier l'apparence de la couleur.
    Pour les bannières de pages : si votre template prend en charge les textes de bannières superposés ou un filtre de couleur de bannière, ces options apparaîtront superposées à la vidéo de la bannière. Les filtres de bannières de sites Web ne comportent pas de Overlay Color Blend Mode (Mode de Fusion de Couleur Filtre).

    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.

    • Version 7.0 : dans l’onglet ou le panneau Médias, cliquez sur Image, puis sur Enregistrer
    • Version 7.1 : cliquez sur l’icône crayon pour modifier la section, puis cliquez sur Image dans l’onglet Arrière-plan.

    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.

    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 modèles :

    • 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.
    Cet article vous a-t-il été utile ?
    Utilisateurs qui ont trouvé cela utile : 142 sur 269
    Ajouter des vidéos d’arrière-plan