Remarque : même si nos guides les plus populaires ont été traduits en espagnol, certains guides sont uniquement disponibles en anglais.
Ajouter une vidéo d'arrière-plan

You can embed background videos from YouTube and Vimeo on Cover Pages and some templates' page banners. Background videos play on loop without sound and add a dynamic visual effect to your 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

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.
  • Les navigateurs mobiles sur smartphones et tablettes ne prennent pas en charge les vidéos d'arrière-plan, mais vous pouvez les remplacer par une image de rechange mobile qui s'affichera si la page est visualisée depuis un appareil mobile.
  • 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.
  • En fonction de la mise en page choisie et de l'appareil utilisé par vos visiteurs, un logo YouTube peut momentanément s'afficher en bas à droite de la vidéo. Rendez-le plus discret en appliquant le filtre Blur (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

  • Vous devez posséder un Compte Vimeo Plus, PRO ou Business pour ajouter une vidéo d'arrière-plan issue de Vimeo.
  • 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 pour éviter les montages rapides et les panoramiques excessifs. Les vidéos trop rapides attirent 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

Les étapes pour ajouter une vidéo sont différentes pour les Pages de Couverture et les bannières de pages de sites Web. Suivez les étapes ci-dessous en fonction de la destination de votre vidéo.

Remarque : tant que votre URL n'est pas indiquée, une courte vidéo de l'océan s'affichera en guise de démo.

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 (Média), cliquez sur l'onglet Video (Vidéo).
  • 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 :

    • Flash - S'affiche dans un panneau latéral
    • Spotlight - S'affiche dans un panneau latéral
    • Vignette - S'affiche dans un panneau latéral
    • Backstory - S'affiche dans un panneau latéral
    • Session - S'affiche dans un panneau latéral
    • Focus - S'affiche dans la zone de portait circulaire
    • Monocle - S'affiche dans la zone de portait circulaire
    • Flagship - Ne prend pas en charge la vidéo
    • Harbor - Ne prend pas en charge la vidéo

    Bannière de page

    Dans certains templates, il est possible de 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.

    Pour ajouter la vidéo à une bannière de page :

    1. Dans le Menu Principal, cliquez sur Pages.
    2. Survolez le titre de la page avec votre souris dans la section de gauche et cliquez sur l'icône .
    3. Cliquez sur l'onglet Media (Média).
    4. Dans l'onglet Media (Média), cliquez sur l'onglet Video (Vidéo).
    5. Collez l'URL de votre vidéo dans le champ Video URL (URL de la vidéo).

    Templates compatibles

    Les templates suivants prennent en charge les vidéos de bannière sur les types de pages indiqués. Ce tableau regroupe les templates par famille.

    Adirondack Page Normale, Produit, Album, Événements, Blog

    Famille Bedford

    Anya, Bryant, Bedford, Hayden

    Page Normale, Produit, Album, Événements, Blog

    Famille Brine

    Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

    Page Normale, Album, Événements, Blog
    Five Page Normale, Album, Événements, Blog

    Famille Montauk

    Julia, Kent, Montauk, Om

    Page Normale, Évènements, Blog, Index (crée une bannière sur la Page Index elle-même, les vidéos ne s'affichent pas dans les vignettes en grille de l'Index)

    Famille Pacific

    Charlotte, Fulton, Horizon, Naomi, Pacific

    Page Normale, Produit, Album, Événements, Blog

    Famille Tremont

    Camino, Carson, Henson, Tremont

    Page Normale, Produit, Album, Événements, Blog

    Famille York

    Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

    Page Normale, Produit, Album, Évènements, Blog, Projet

    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 ne prennent pas en charge les vidéos d'arrière-plan. Vous pouvez définir une image de rechange mobile qui remplacera la vidéo d'arrière-plan sur les appareils mobiles. Vous pouvez également appliquer des filtres à l'image de rechange mobile. Pour des résultats optimaux, formatez votre image pour l'affichage sur le Web avant de l'ajouter.

    Ajouter une image pour mobile :

    1. Dans la section Media, cliquez sur l'onglet Video.
    2. Scroll down and drag your image into the image uploader. You can also use a stock image.
    3. Cliquez sur Save (Enregistrer).
    Conseil : ajoutez une image animée au format .gif en tant qu'Image Mobile pour créer un effet similaire.

    If you don't add a mobile fallback image, a background color will display on mobile instead. You can choose this color with the following Site Styles tweaks. Templates are grouped by family.

    Pages de Couverture Background: Color (Arrière-plan : Couleur)
    Adirondack Content Background Color (Couleur d'Arrière-Plan du Contenu)

    Famille Bedford

    Anya, Bryant, Bedford, Hayden

    Banner Overlay Color (Couleur Filtre de la Bannière)

    Famille Brine

    Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

    Overlay Color (Couleur Filtre)
    Five Banner Overlay Color / Header Background (Couleur Filtre de la Bannière / Arrière-Plan de l'En-tête)

    Famille Montauk

    Julia, Kent, Montauk, Om

    Canvas Background (Arrière-Plan du Contenu)

    Famille Pacific

    Charlotte, Fulton, Horizon, Naomi, Pacific

    Overlay Color (Couleur Filtre)

    Famille Tremont

    Camino, Carson, Henson, Tremont

    Site Background Color (Couleur d'Arrière-Plan du Site)

    Famille York

    Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

    Background Color (Couleur d'Arrière-Plan)

    É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.

    Dans l'onglet ou la section Media (Média), cliquez sur Image, puis sur Save (Enregistrer). L'image définie remplacera la vidéo d'arrière-plan.

    Si votre site contient une Page de Couverture, vous pouvez également sélectionner None (Aucune) pour remplacer la vidéo par une couleur d'arrière-plan.

    Bannières vidéo dans un Index

    Vous pouvez ajouter des bannières vidéo dans l'Index de certains templates. Cette liste regroupe les templates par famille.

    • Famille Bedford - Anya, Bryant, Bedford, Hayden
    • Famille Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
    • Famille Montauk - Julia, Kent, Montauk, Om
    • Famille Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
    • Famille York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

    Pour ajouter la vidéo, ouvrez les paramètres de sous-page et cliquez sur Media (Média), puis Video (Vidéo). Ensuite, 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 : 123 sur 216
    Ajouter une vidéo d'arrière-plan