Nouveau sur Videas ? Commencez par Premiers pas : tour de l’interface.
Intégrer une collection Videas sur votre site, c’est offrir à vos visiteurs une expérience de playlist : un seul lecteur, navigation entre tous les médias, parfois en autoplay continu. Mais une collection peut être de trois sous-types très différents (vidéos, audios, images) — et chaque sous-type ouvre des options spécifiques dans la modale Intégrer (modes d’affichage Drawer/Bottom Bar/Sidebar pour les vidéos, diaporama pour les images, shuffle pour les audios). Ce guide fait le tour des trois cas, avec les bonnes pratiques par maquette et les particularités du contenu dynamique sur les collections intelligentes.
Prérequis
- Une collection Videas avec au moins un média
- Un site web où coller le code embed
- Le rôle Member ou supérieur sur l’espace
- (recommandé) Avoir lu Intégrer une vidéo sur votre site web pour les bases (Script vs iframe, dimensions, responsive)
Ce que vous allez apprendre
- Repérer les 3 sous-types de collections et leurs spécificités d’embed
- Configurer un embed collection vidéos (modes d’affichage, autoplay-next)
- Configurer un embed collection audios (autoplay, boucle, shuffle)
- Configurer un embed collection images (diaporama, légendes, zoom)
- Anticiper le comportement dynamique des collections intelligentes
- Choisir la disposition adaptée à votre maquette
Les 3 sous-types de collections
Le sous-type d’une collection est défini à sa création (ou par les règles d’une collection intelligente). Il conditionne le lecteur affiché et les options disponibles dans la modale Intégrer.
| Sous-type | Cas d’usage typique | Options d’embed propres |
|---|---|---|
| Vidéos (ou collection mixte) | Cours en ligne, playlist replays, série corporate | Mode d’affichage (Drawer / Bottom Bar / Sidebar), autoplay-next |
| Audios | Podcast, formation audio, playlist sonore | Autoplay, boucle, shuffle (lecture aléatoire), auto-resize |
| Images | Galerie photo, portfolio, séquence pédagogique | Diaporama, durée diaporama, légendes, zoom, plein écran, téléchargement |
À retenir : la modale Intégrer s’adapte automatiquement au sous-type — les options qui n’ont pas de sens (par exemple,
shufflesur une collection vidéos) n’apparaissent pas. Si vous changez le contenu d’une collection mixte, le sous-type peut basculer.
Étape 1 : Ouvrir la modale Intégrer
Depuis votre médiathèque :
- Ouvrez la fiche de la collection
- Cliquez sur le bouton Intégrer (en haut à droite)
La modale s’ouvre. La structure est identique à celle d’un média individuel (voir Intégrer une vidéo sur votre site web), mais les options s’adaptent au sous-type de la collection.
Étape 2 : Méthode et dimensions
Les principes sont les mêmes que pour un embed individuel :
- Méthode : Script par défaut (lecteur Videas natif, mises à jour automatiques) ; iframe si votre CMS bloque le
<script>(Notion, Wix bloc HTML, certains intranets) - Responsive : activé par défaut, recommandé
- Dimensions : par défaut 640 × 600 px pour une collection (légèrement plus grand qu’un média seul, pour absorber l’interface de navigation)
Étape 3 : Cas — Collection vidéos
Modes d’affichage
L’option Mode d’affichage détermine comment la liste des vidéos est présentée à côté du lecteur.
| Mode | Description | Quand l’utiliser |
|---|---|---|
| Drawer (par défaut) | Tiroir latéral qui s’ouvre au clic sur un bouton dédié | Look épuré, masque la liste tant qu’elle n’est pas demandée — idéal sur une page éditoriale où la vidéo principale doit ressortir |
| Bottom Bar | Barre horizontale en bas du lecteur, miniatures des vidéos suivantes | Idéal sur une landing page large ou une bannière hero — peu de hauteur consommée |
| Sidebar | Liste verticale fixe à droite du lecteur, look “playlist YouTube” | Idéal sur les sites où la liste est centrale (cours en ligne, plateforme de replays) — bonne lisibilité de l’inventaire complet |
Lecture automatique de la suivante
Toggle Lecture automatique de la suivante (autoplay-next). Quand activé, dès qu’une vidéo se termine, la suivante de la collection démarre automatiquement (comme YouTube ou Netflix).
Conseil : activez
autoplay-nextsur les playlists pédagogiques (un cours en plusieurs leçons) où l’utilisateur veut tout regarder. Désactivez sur les portfolios ou les galeries éditoriales où l’utilisateur choisit chaque vidéo selon son intérêt.
Format conseillé selon le mode
- Drawer : 16:9 + 640×360 (la vidéo prime, le tiroir est masqué)
- Bottom Bar : 16:9 + 720×500 (vidéo + bande de miniatures en bas)
- Sidebar : ratio plus large, par exemple 1024×600 (vidéo + sidebar verticale à droite)
Étape 4 : Cas — Collection audios
Pour une collection audios (podcast, playlist sonore, série de formations audio).
Options de lecture
- Lecture automatique : le premier audio démarre dès le chargement (à combiner avec muet pour fiabilité — voir avertissement de l’article principal)
- Boucle : la collection redémarre depuis le début quand le dernier audio est terminé
- Lecture aléatoire (shuffle) : l’ordre de lecture est tiré au sort à chaque visite ; idéal pour les playlists d’ambiance où la séquence n’a pas d’importance pédagogique
Auto-resize
Toggle Adaptation automatique de la hauteur (auto-resize) : le lecteur audio ajuste sa hauteur au contenu (pochette + waveform + contrôles + liste). Évite les espaces vides ou les barres de défilement parasites.
Format conseillé
640 × 400 px par défaut, à ajuster selon la longueur de votre liste si auto-resize est désactivé.
Étape 5 : Cas — Collection images
Pour une collection images (galerie photo, portfolio visuel, séquence pédagogique).
Diaporama
Toggle Diaporama activé (slideshow) : une fois activé, les images défilent automatiquement au rythme défini.
Champ Durée du diaporama : valeur en secondes (1-60), durée d’affichage de chaque image avant passage à la suivante.
| Durée | Cas d’usage |
|---|---|
| 2-3 s | Mood reel, ambiance, présentation rapide |
| 5 s (par défaut) | Galerie standard, portfolio |
| 8-15 s | Séquence pédagogique, captures d’écran avec texte à lire |
Légendes
Toggle Afficher les légendes : si vos images ont une légende renseignée dans la médiathèque, elle s’affiche en surimpression. Particulièrement utile pour les portfolios ou les séquences pédagogiques où chaque image doit être contextualisée.
Autres options
- Zoom : permet au visiteur d’agrandir l’image
- Plein écran : passage en mode plein écran
- Téléchargement : bouton pour télécharger l’image
Format conseillé
- 16:9 pour des photos en mode paysage
- 1:1 pour un mix portrait/paysage ou un Instagram-like
- 9:16 pour des images verticales (mobile, story)
Étape 6 : Comportement dynamique (collection intelligente)
Encadré important : sur une collection intelligente (mise à jour automatiquement selon des règles, par exemple toutes les vidéos taguées “tutoriel”), l’embed reflète en permanence le contenu actuel de la collection. Quand vous ajoutez une vidéo qui matche les règles, elle apparaît dans tous les embeds de cette collection sans que vous ayez à toucher au code embed.
Implications à anticiper :
- ✅ Avantage : votre site reste à jour automatiquement (parfait pour une bibliothèque vivante qui s’enrichit)
- ⚠️ Vigilance : si vous retirez un tag ou modifiez une règle, des contenus peuvent disparaître des embeds publiés
- ⚠️ Vigilance : un brouillon mal taggé peut se retrouver sur votre site avant relecture
Recommandations :
- Pré-validez une vidéo avant qu’elle ne rejoigne la collection automatique (pas de brouillon avec le tag “public” avant relecture)
- Surveillez les collections intelligentes très diffusées (audit hebdomadaire ou mensuel)
- Préférez une collection manuelle quand le contenu doit être stable dans le temps (livraison contractuelle à un client, version verrouillée, conformité)
Pour le détail du fonctionnement et les autres implications, voir Partager une collection avec votre audience (étape 4).
Étape 7 : Coller dans votre site
Procédure identique à un embed individuel :
- Page HTML maison : collez le snippet dans le
<body> - WordPress : bloc HTML personnalisé
- Wix / Notion : utilisez la méthode iframe (les
<script>y sont souvent bloqués) - Webflow / Squarespace : éléments Embed ou Code
Voir Intégrer une vidéo sur votre site web (étape 8) pour le détail par CMS.
Bonnes pratiques
Choisir le mode d’affichage selon la maquette
- Site éditorial / blog : Drawer (la vidéo prime, la liste est secondaire)
- Landing page : Bottom Bar (peu de hauteur, suggère les contenus suivants discrètement)
- Plateforme de replays / cours en ligne : Sidebar (la liste est l’enjeu principal)
Utiliser les préréglages pour la cohérence
Si vous publiez plusieurs collections sur votre site, créez un préréglage organisation pour fixer le mode d’affichage, le thème et les options. Voir Options avancées d’intégration vidéo pour la gestion des préréglages.
Surveiller les collections intelligentes
Pour une collection intelligente embed largement, prévoyez un audit régulier (mensuel ou trimestriel) pour vérifier que :
- Le contenu reste pertinent par rapport à la promesse de la page
- Aucun brouillon mal taggé n’a contaminé l’embed
- Les règles de la collection n’ont pas été modifiées par erreur
Adapter les dimensions au sous-type
Une dimension par défaut générique (640×600) ne convient pas à tous les usages. Ajustez selon le sous-type et votre maquette : 1024×600 pour une Sidebar vidéos, 640×400 pour un audio compact, ratio carré 600×600 pour une galerie image en grille.
Cas d’usage concrets
Cours en ligne (collection vidéos manuelle)
- Sous-type : vidéos
- Mode d’affichage : Sidebar (la liste des modules est centrale)
- Lecture automatique de la suivante : activée (l’utilisateur veut suivre le cours en continu)
- Dimensions : 1024 × 600 px ou plein écran responsive
- Préréglage recommandé : un thème “Formation” avec couleur primaire de la marque
Playlist sonore d’ambiance (collection audios manuelle)
- Sous-type : audios
- Lecture automatique : activée + muet au démarrage
- Boucle : activée (la playlist tourne en continu)
- Lecture aléatoire : activée (l’ordre n’a pas d’importance)
- Dimensions : 640 × 400 px
Galerie photos d’événement (collection images manuelle)
- Sous-type : images
- Diaporama : activé, durée 5 s
- Légendes : activées (légende = nom du photographe + lieu)
- Zoom + Plein écran : activés (les visiteurs voudront zoomer)
- Téléchargement : selon vos droits d’image (à activer si autorisé)
- Dimensions : 16:9 ou 1:1 selon les cadrages
En résumé
- L’embed d’une collection s’adapte au sous-type : vidéos, audios, images — chaque sous-type ouvre des options différentes
- Collection vidéos : 3 modes d’affichage (Drawer / Bottom Bar / Sidebar), autoplay-next pour une lecture continue
- Collection audios : autoplay, boucle, shuffle (lecture aléatoire), auto-resize
- Collection images : diaporama avec durée 1-60s, légendes, zoom, plein écran, téléchargement
- Comportement dynamique : sur une collection intelligente, l’embed suit en temps réel les évolutions de la collection — préférer une collection manuelle pour les contenus à figer
- Choix du mode selon la maquette : Drawer (épuré), Bottom Bar (landing), Sidebar (plateforme replays/formation)
- Préréglages précieux pour la cohérence quand on publie plusieurs collections