Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
Ajout de vidéos sur votre site Squarespace

Vous pouvez ajouter des vidéos dans les zones suivantes :

  • Blocs Vidéo
  • Blocs Galerie
  • Pages Galerie
  • Pages de Couverture
  • Bannières dans certains templates

Ce guide vous présente les différentes façons d'ajouter des vidéos sur votre site.

Vous pouvez intégrer des vidéos (et non pas les télécharger sur le site)

Squarespace prend en charge l'intégration de vidéos à partir de YouTube, Vimeo, Animoto et Wistia . Ces services sont très respectés pour la qualité de leur streaming, leur facilité de mise en ligne et leur contrôle de la lecture vidéo.

C'est pour toutes ces raisons que Squarespace n'offre que des options d'intégration de vidéos. Nous ne prenons pas en charge les téléchargements directs, ce qui aide votre site à se charger plus rapidement, permet aux visiteurs de partager vos vidéos et offre de multiples options pour l'hébergement de vidéos.

Héberger votre vidéo

Avant d'intégrer une vidéo sur votre site, téléchargez-la vers un service d'hébergement externe pris en charge. Cliquez sur les liens ci-dessous pour consulter les instructions de chaque hébergeur :

Assurez-vous que votre vidéo n'est pas définie comme privée sur la page de votre hébergeur, car seules les vidéos publiques s'afficheront correctement sur votre site.

Remarque : les vidéos d'arrière-plan prennent en charge uniquement YouTube et Vimeo.

Ajouter une vidéo à une page

Vous pouvez ajouter des vidéos individuelles à une Page Normale, une Page de Couvertureun article de blog, ou à toute autre zone de bloc modifiable.

Ce tableau présente les différentes façons d'ajouter des vidéos à l'une de ces zones.

Bloc Vidéo

Bloc Galerie

  • Plusieurs vidéos affichées dans une grille, en diaporama, en carrousel ou empilées
  • Vous pouvez les mélanger avec des images statiques
  • Les vidéos sont lues avec le son lorsque elles sont cliquées.
  • Vous pouvez les configurer pour qu'elles soient lues automatiquement.

Block Sommaire

  • Extrait les vidéos provenant d'une Page Galerie afin de les afficher dans une grille, en diaporama, en carrousel ou empilées
  • Une fois cliquée, la vidéo est lue automatiquement dans une lightbox, avec le son
  • Filtrage par catégorie ou par tag
  • Assurez-vous que chaque vidéo dispose d'une vignette pour optimiser les résultats

Bannières vidéo

  • Disponibles dans certains templates
  • Les vidéos sont automatiquement lues, sans le son mais en boucle

Pages de Couverture

  • Disponible sur certaines mises en page
  • Lecture dans une lightbox avec du son lorsque vous cliquez dessus

Ajouter des vidéos dans une galerie

Vous pouvez ajouter des Pages Galerie à tous les templates pour présenter vos images et vos vidéos.

Le style, la mise en page, l'affichage de la légende et le comportement de votre Page Galerie dépendent de votre template. Par exemple, le template Wexley vous permet d'ouvrir des images et des vidéos dans une lightbox.

  • La plupart des Pages Galerie possèdent plus d'une option de mise en page.
  • Vous pouvez déplacer des images et des vidéos d'une Page Galerie à une autre.
  • Les vidéos d'une Page Galerie peuvent être intégrées à un Bloc Sommaire et ainsi filtrées par catégorie ou par tag.
  • Les vidéos sont lues avec le son.
  • Les vidéos peuvent être configurées pour être lues automatiquement.

Si vous n'aimez pas la Page Galerie de votre template mais que vous ne souhaitez pas changer de template, vous pouvez ajouter un Bloc Galerie à une Page Normale. Vous obtiendrez ainsi quatre options de mise en page : en grille, en diaporama, en carrousel ou empilé. Pour en savoir plus, visitez la page Blocs Galerie vs Pages Galerie.

Ajouter une vidéo d'arrière-plan

Vous pouvez afficher une vidéo en tant qu'image d'arrière-plan, derrière le contenu de votre page. Vous avez deux façons de procéder :

Page de Couverture

  • Ajoutez une Page de Couverture à votre site et intégrez-y une vidéo d'arrière-plan silencieuse et passant en boucle.
  • La plupart des mises en page prennent en charge les vidéos d'arrière-plan ; et celles-ci doivent être hébergées sur YouTube ou Vimeo.

Arrière-plan de site

  • Certains templates peuvent prendre en charge une image d'arrière-plan pour tout le site.
  • Pour ces templates, utilisez une image .gif en tant qu'arrière-plan de site. Cela crée une vidéo d'arrière-plan silencieuse passant en boucle.

 

Ajouter une bannière vidéo

Certains templates prennent en charge les bannières, qui s'affichent en haut de votre site.

Bannières vidéo

  • Disponible sur certains templates
  • Lecture en boucle automatique
  • Pas de son
  • Fonctionne uniquement avec des vidéos YouTube et Vimeo
  • Affiche le texte en superposition
  • Affiche une image statique uniquement sur mobiles

Famille Bedford

  • Les templates Anya, Bedford, Bryant et Hayden prennent en charge une bannière spéciale en diaporama sur les Pages Normales
  • Pas de lecture automatique
  • Le son est activé
  • Affiche le texte en superposition

Ajouter des vidéos à un Index

La Page Index recueille des images et du contenu provenant de différentes pages, et les organise sous forme de diaporama, de grille de vignettes ou de sections empilées. Les Pages Index sont disponibles sur certains templates.

Voici les différentes façons d'utiliser des vidéos avec chaque type d'Index :

Index empilés

  • Les vidéos et les images de bannières .gif sont empilées.
  • Vous pouvez ajouter des champs de contenu avec des Blocs Galerie ou des Blocs Vidéo.
  • Certains Index empilés prennent en charge les Page Galerie.

Index en diaporama

  • Le template Momentum prend en charge les vidéos des Pages Galerie dans l'Index.
  • Pour tous les autres Index en diaporama, utilisez des images au format .gif pour créer des diapositives mobiles.

Index en grille

  • Les vidéos ne sont pas prises en charge dans une grille de vignettes. Utilisez plutôt une image au format .gif pour créer des vignettes mobiles.
Astuce : certains Index prennent en charge d'autres options, telles que les en-têtes de page avec des zones de bloc modifiables.

Vidéos - URL vs. codes intégrés

Une fois que la vidéo est hébergée par un service comaptible, vous pouvez l'intégrer sur votre site à l'aide d'une URL ou d'un code d'intégration spécifique. Habituellement, les URL de vidéo sont plus pratiques, mais le code d'intégration offre des d'options avancées.

URL de vidéo

Pour les vidéos hébergées sur YouTube, Vimeo, Animoto et Wistia, vous pouvez utiliser l'URL de la vidéo afin de l'intégrer à votre site. L'URL de la vidéo s'affiche dans le navigateur à la page où elle est hébergée.

video-url.png

Si vous choisissez d'ajouter la vidéo à un Bloc Vidéo, un Bloc Galerie, une Page Galerie ou une Page de Couverture, collez ce lien dans le champ Vidéo URL (URL Vidéo).

gallery_block.jpg

Code d'intégration

L'hébergeur de votre vidéo vous fournit un code d'intégration spécifique pour chaque vidéo. Utiliser un code d'intégration vous permet de :

  • Contrôler les paramètres d'affichage avancés
  • Activer la lecture automatique
  • Intégrer des vidéos provenant d'hébergeurs autres que YouTube, Vimeo, Animoto et Wistia
  • Désactiver les vidéos associées de YouTube
Remarque : toutes les zones vidéo prennent en charge le code d'intégration, à l'exception des arrière-plans vidéo de Pages de Couverture.

Les étapes pour trouver le code d'intégration de votre vidéo varient en fonction du service d'hébergement. Si vous ne trouvez pas le code d'intégration de votre vidéo, nous vous conseillons de contacter votre service d'hébergement.

Astuce : la plupart des hébergeurs vous permettent de personnaliser le code d'intégration. Par exemple, pour désactiver les Vidéos associées sur les vidéos YouTube, décochez l'option Show suggested videos when the video finishes (Afficher les vidéos recommandées lorsque la vidéo est finie) avant de copier le code.

Voici un exemple de code d'intégration de YouTube :

embed-code.png

Si vous ajoutez la vidéo à un Bloc Vidéo, un Bloc Galerie, une Page Galerie ou une Page de Couverture, cliquez sur l'icône </> dans le champ Video URL (URL vidéo).

Remarque : votre hébergeur doit utiliser la norme oEmbed pour que votre vidéo fonctionne dans ces blocs et ces pages. Si ce n'est pas le cas, utilisez le code dans un Bloc Code .

Collez le code d'intégration dans la fenêtre pop-up, puis cliquez sur Set (Définir).

embed-code2.png

Dans la fenêtre Edit Video (Configurer la vidéo) , vous pourrez lire le message « Embed data has been manually set » (Les données d'intégration ont été définies manuellement), ce qui confirme que nous reconnaissons le code d'intégration.

Vous pouvez personnaliser votre vidéo en ajoutant une vignette, un titre et une description, puis cliquez sur Save (Enregistrer).

Lecture automatique

Les bannières vidéo et les images au format .gif seront automatiquement lues lorsque la page sera chargée. 

Pour les Blocs Vidéo, les Pages Galerie et les Blocs Galerie, vous devrez personnaliser le code d'intégration de la vidéo afin qu'elle démarre automatiquement. Les étapes requises varient légèrement selon le service.

Pour tous les services d'hébergement, décochez l'option Use Thumbnail (Utiliser la vignette) après avoir ajouté le code d'intégration. Les vignettes personnalisées forcent le paramètre de lecture automatique.

Remarque : si votre page contient plusieurs vidéos en lecture automatique, elles démarreront toutes en même temps (sauf si vous utilisez Vimeo). Voilà pourquoi nous vous conseillons d'utiliser au maximum une vidéo en lecture automatique par page.
Remarque : les vidéos ne se lanceront pas automatiquement sur les appareils mobiles.

uncheck-use-thumb.png

Lecture automatique d'une vidéo YouTube

Pour lire automatiquement une vidéo YouTube, ajoutez ?autoplay=1 à la fin de l'URL figurant dans votre code d'intégration.

Paramétrer une vidéo Vimeo en lecture automatique

Avant de copier le code d'intégration de Vimeo, cliquez sur + Show options (Afficher les options).

Cochez Autoplay this video (Lire automatiquement cette vidéo) et le code d'intégration s'ajustera.

Ajoutez ensuite ce nouveau code d'intégration dans votre Bloc Vidéo. Vous pouvez également ajouter manuellement ?autoplay=1 à la fin de l'URL figurant dans le code d'intégration. Pour obtenir plus d'aide, visitez ladocumentation Vimero.

Paramétrer une vidéo Animoto en lecture automatique

Animoto offre l'option de démarrer automatiquement votre vidéo dans l'onglet Embedded Video (Vidéo intégrée) :

Lecture automatique dans une galerie sur une Page Index

Seules certaines pages Index autorisent la lecture automatique de vidéos sur une Page Galerie. Cette liste regroupe les templates par famille.

  • Momentum
  • Famille Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
Remarque : les Pages Index en Grille ne prennent pas en charge les vidéos dans la grille de vignettes, mais vous pouvez ajouter des vidéos en lecture automatique à des Pages Galerie au sein de l' Index.

Utiliser des images animées au format .gif

Les images animées au format .gif sont lues automatiquement, en boucle, et restent silencieuses. Vous pouvez utiliser des images .gif dans toutes les zones de votre site où vous pouvez ajouter des images, notamment :

Résolution de problèmes

Les vidéos se chargent trop lentement

Si une vidéo met beaucoup de temps à se charger, elle a probablement besoin de ce délai supplémentaire pour sa mise en mémoire tampon. De nombreuses vidéos, plus longues ou en HD, nécessitent un temps de chargement plus long. De plus, cette durée dépend aussi de votre connexion Internet.

Cliquer sur « Lecture » sur une vidéo démarre le processus de mise en mémoire tampon. Si vous mettez la vidéo sur pause et attendez que le contenu se charge en arrière-plan, vous pourrez la mettre en mémoire tampon et la lire plus facilement.

Des vidéos YouTube similaires se lisent après la mienne

À la fin d'une vidéo, YouTube affiche des vidéos similaires. Il s'agit d'une fonctionnalité de YouTube qui n'est pas contrôlée par Squarespace. Vous pouvez désactiver cette fonction en modifiant l'URL de partage de la vidéo ou en utilisant un code d'intégration pour la vidéo et en désactivant l'option dans les paramètres d'intégration de la vidéo.

Ce sujet a été abordé sur notre forum de questions-réponses, vous pouvez visualiser l'article ici.

Les vidéos Vimeo ne sont pas lues en HD

Pour lire des vidéos Vimeo en HD, utilisez le code d'intégration pour ajouter la vidéo, plutôt que son URL. Pour mettre en ligne des vidéos HD 1080p sur Vimeo, vous devez avoir un compte Plus ou PRO chez eux.

Les boutons et commandes ne s'affichent pas sur les vidéos Vimeo

Vimeo active le « Mode Minuscule » lorsqu'un Bloc Vidéo mesure moins de 300 pixels de largeur ou 170 pixels de hauteur. Le Mode Minuscule masque les boutons et les informations supplémentaires, telles que le titre, la barre de commande et les boutons Regarder plus tard / Partager. Pour éviter cela, les visiteurs peuvent visualiser le Bloc Vidéo sur un écran plus grand.

Le bouton de plein écran n'apparaît pas ou ne fonctionne pas

Lorsque vous êtes connecté à votre site, les lecteurs Vimeo et YouTube n'afficheront pas le bouton de plein écran. Pour le voir, ouvrez la page dans une fenêtre privée de votre navigateur.

Le format des vidéos Wistia est trop petit

Sur la Page Projet, les vidéos Wistia sont affichées dans un format plus petit. Pour éviter ce problème, vous pouvez utiliser une plateforme d'hébergement de vidéos différente.

FAQ

Les lectures des vidéos de mon site sont-elles comptabilisées comme des vues ?

Squarespace n’a aucun contrôle sur la façon dont le nombre de vues d’une video est comptée. Les lectures de vidéos intégrées s'ajoutent à votre nombre de vues, ou pas, selon votre hébergeur :

  • YouTube - Ne comptabilise pas les vues de vidéos intégrées. Cependant, YouTube fournit une répartition des chiffres basée sur l'emplacement où les visiteurs trouvent vos vidéos. Pour en savoir plus, consultez la documentation de YouTube Analytics.
  • Vimeo - Vimeo comptabilise les vues des vidéos intégrées. Pour en savoir plus, consultez la documentation de Vimeo.

Pour en savoir plus sur les autres services d'hébergement, consultez leur documentation.

Si Squarespace ne prend pas en charge mon hébergeur de vidéo, comment puis-je ajouter ma vidéo ?

Dans la plupart des cas, nous vous recommandons de mettre votre vidéo en ligne chez un hébergeur compatible. Si cela n'est pas possible, ou bien si vous devez absolument héberger la vidéo ailleurs, nous avons d'autres options à vous proposer.

Si votre vidéo est hébergée par un service prenant en charge le protocole oEmbed, elle pourra être ajoutée aux zones suivantes à l'aide de son URL ou code d'intégration :

  • Blocs Vidéo
  • Blocs Galerie
  • Pages Galerie
  • Pages de Couverture

Les codes d'intégration ne peuvent pas être ajoutés aux arrière-plans vidéos d'une Page de Couverture.

Si la vidéo ne fonctionne pas et que l'URL ou le code d'intégration ne comporte aucune erreur telle qu'une faute de frappe, il est probable que l'hébergeur vidéo ne prenne pas en charge la norme oEmbed. Pour ces vidéos, vous pouvez ajouter le code d'intégration dans un Bloc Code à la place. Le support client de Squarespace ne sera pas en mesure de vous aider pour tout problème lié à l'utilisation de code personnalisé sur un site Squarespace.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 40 sur 119
Ajout de vidéos sur votre site Squarespace