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

Utilisez des vidéos d’arrière-plan pour ajouter des effets visuels dynamiques à votre site. 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 n’ont pas de son. Pour les vidéos d’arrière-plan, vous pouvez :

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

Astuce : vous pouvez aussi ajouter des arrière-plans animés avec des effets d’image, ou bien un motif d’arrière-plan unique. Pour en savoir plus, consultez la page Animations et effets d’image.

Avant de commencer

Astuces 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é du flux n'est pas sous le contrôle de Squarespace. Si vos vidéos vous semblent de mauvaise qualité, suivez nos conseils de conception. Contactez votre service d'hébergement vidéo si la qualité ne s'améliore pas.
  • Même si les bannières vidéo qui suivent nos conseils de design doivent s’afficher sur les ordinateurs, il est possible que la vidéo ne s’affiche pas toujours sur les appareils mobiles, en fonction de la vitesse de connexion du visiteur et de la version de son navigateur. Définissez une image de remplacement pour appareil mobile, qui apparaîtra si la bannière vidéo ne peut pas être chargée.
  • 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.
  • 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 intégré.

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 excellent moyen d'ajouter un intérêt visuel à votre site, mais elles ne doivent pas détourner l'attention 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 télé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 :

Pourboire 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.
Limitez le nombre de vidéos d’arrière-plan par page
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 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 importer votre fichier vidéo dans un arrière-plan de section dans la version 7.1. Vous pouvez également importer 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, assurez-vous que votre vidéo répond à nos règles en matière de vidéos importées.

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. Vérifiez que les paramètres de confidentialité de la vidéo sont définis sur N’importe qui et autorisez 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 pour ajouter une vidéo 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 les sections de blog, des événements et de boutique. Assurez-vous que votre vidéo respecte nos exigences en matière de vidéo. Pour ajouter une vidéo d’arrière-plan, procédez comme suit :

  1. Dans le Menu principal, cliquez sur Pages, puis sur la page contenant la section que vous souhaitez modifier.
  2. En haut à gauche, cliquez sur Modifier.
  3. Cliquez sur l’icône en forme de crayon de la section, puis sur Arrière‑plan.
  4. Cliquez sur Vidéo, puis sur l’icône +. Sélectionnez une source de vidéo dans le menu déroulant. Pour obtenir des instructions détaillées, consultez la section ci-dessous.
  5. Faites défiler vers le bas pour personnaliser d’autres paramètres vidéo.
  6. Survolez Terminé et cliquez sur Enregistrer.

Choisir une vidéo

Après avoir cliqué sur l’icône +, choisissez comment ajouter votre vidéo :

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 vidéos en bannière 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.

Fond de la page de couverture

Pour ajouter une 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 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. 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. 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

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 5 - Ajouter une image de rechange 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 :

  1. Cliquez sur Modifier sur la page, 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. Sous Image de remplacement pour appareil mobile, cliquez sur Ajouter une image pour 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, un arrière-plan de couleur 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, un arrière-plan de couleur 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 la superposition de la bannière
  • Brine - Réglages des couleurs superposées
  • 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 de l’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 ou supprimer la vidéo d’arrière-plan

Pour retirer une vidéo d’arrière-plan existante, 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. Ainsi, l’image définie remplace la vidéo d’arrière-plan. Il est possible de supprimer des vidéos d’arrière-plan uniquement 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.

Pour désactiver votre vidéo d’arrière-plan, procédez comme suit :

  1. Cliquez sur Modifier sur la page, 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.

Chaque site dispose de 30 minutes de stockage vidéo. Si vous atteignez cette limite, vous pouvez supprimer des vidéos pour libérer de l’espace de stockage. Il n’est pas possible de supprimer plusieurs vidéos à la fois.

Pour supprimer une vidéo d’arrière-plan de section, procédez comme suit :

  1. Dans l’éditeur de sections, cliquez sur Arrière-plan.
  2. Cliquez sur Vidéo, puis sur l’icône +.
  3. Cliquez sur Sélectionner dans la bibliothèque.
  4. Cochez la case en regard de la vidéo que vous souhaitez supprimer, puis cliquez sur Supprimer.
  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 : 211 sur 481
Ajouter des vidéos d’arrière-plan