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

Pour ajouter des effets visuels dynamiques à votre site, utilisez des vidéos d'arrière-plan lues en boucle. 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. 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.

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.
  • 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.
  • Suivez nos conseils d’accessibilité vidéo pour garantir une expérience visuelle de qualité à vos visiteurs.
  • Il n'y a pas de limite de temps pour les vidéos de tiers intégrées. Lorsque vous chargez une vidéo pour l'arrière-plan, la durée maximale est de 60 secondes. Les vidéos plus courtes peuvent afficher la couleur d'arrière-plan plus fréquemment lors de la boucle.
  • 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.
  • 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 des autres contenus de votre site. Voici quelques bonnes pratiques pour que votre vidéo d'arrière-plan soit attrayante.

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.
  • Utilisez une résolution de 1080p et un débit d'au moins 3 Mbps.
  • La durée idéale d'une vidéo est de moins de 40 secondes.
  • 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 - Trouver l'URL de votre vidéo

Pour ajouter une vidéo d’arrière-plan, chargez-la 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.

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.

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 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, 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 +. Choisissez Charger un fichier pour ajouter une vidéo à partir de votre appareil ou cliquez sur Ajouter depuis le lien, pour ajouter une URL Vimeo ou YouTube. Une fois que vous avez ajouté un lien, cliquez sur Enregistrer.
  5. Faites défiler vers le bas pour personnaliser d’autres paramètres vidéo.
  6. 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 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 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 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.
  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 : 202 sur 459
Ajouter des vidéos d’arrière-plan