Tous les réglages du lecteur, un par un
Le lecteur Videas se règle à deux endroits, et la différence compte : certains réglages sont écrits dans le code d’intégration, d’autres sont résolus par Videas à chaque lecture. Les premiers exigent de re-copier le code quand vous les changez ; les seconds s’appliquent tout seuls, même à une vidéo déjà en ligne depuis six mois.
Cet article donne la liste complète, avec le nom exact de chaque paramètre.
Les deux familles de réglages
Les paramètres du code (la liste ci-dessous) sont inscrits dans le code que vous copiez depuis Videas. Sur une intégration en <script>, ils voyagent dans des attributs data- ; sur une iframe, dans l’URL. Les modifier après coup ne change rien au code déjà collé sur votre site : il faut le récupérer à nouveau.
Les réglages du lecteur — thème clair/sombre, couleur d’accent, logo, position du logo, mode éco par défaut — ne sont pas dans le code. Videas les résout au moment de la lecture, depuis votre préréglage par défaut. Vous pouvez donc changer la couleur de votre marque sans toucher à une seule page de votre site. Ils se règlent dans Réglages du lecteur, et sont détaillés dans Personnaliser le thème du lecteur.
Comment écrire un paramètre
Le nom du paramètre est le même partout ; seule la forme change selon la méthode d’intégration.
En <script> — le nom en minuscules, tirets, préfixé data- :
<script src="https://videas.com/embed.js" data-embed="VOTRE-ID"
data-auto-play="1" data-muted="1" data-show-chapters="0"></script>
En iframe — le nom en minuscules avec des tirets bas, dans l’URL :
<iframe src="https://videas.com/embed/VOTRE-ID/?auto_play=1&muted=1&show_chapters=0"
width="640" height="360" allowfullscreen allow="autoplay"></iframe>
Les valeurs oui/non s’écrivent 1 ou 0. Une couleur s’écrit sans le dièse : primary_color=884aff.
Deux règles à connaître :
- Videas n’écrit dans le code que ce qui diffère de vos réglages. Si votre préréglage met déjà le thème sombre, le code copié ne contient pas
theme— il suivra donc votre préréglage. C’est voulu : le code reste court et il continue de refléter vos réglages. - Un paramètre présent dans le code gagne toujours. Si vous écrivez
theme=lighten dur, changer votre préréglage n’aura plus d’effet sur cette intégration précise.
Lecture et interactions
| Paramètre (iframe) | Attribut (script) | Défaut | Ce qu’il fait |
|---|---|---|---|
auto_play |
data-auto-play |
0 |
Démarre la lecture au chargement de la page |
auto_play_next |
data-auto-play-next |
1 |
Enchaîne l’élément suivant d’une collection |
loop |
data-loop |
0 |
Reprend au début à la fin du média |
muted |
data-muted |
0 |
Démarre sans le son |
shuffle |
data-shuffle |
0 |
Lit une collection audio dans un ordre aléatoire |
controls |
data-controls |
1 |
Affiche la barre de contrôle |
pin_controls |
data-pin-controls |
0 |
Garde la barre de contrôle toujours visible |
enable_download |
data-enable-download |
0 |
Autorise le téléchargement du fichier |
start_at |
data-start-at |
— | Démarre à un instant donné, en secondes |
start_page |
data-start-page |
1 |
Ouvre un document à cette page |
La lecture automatique exige le son coupé. Tous les navigateurs refusent de démarrer une vidéo audible sans geste de l’utilisateur : auto_play=1 seul ne démarrera pas. Écrivez toujours les deux, auto_play=1&muted=1. Sur une iframe, ajoutez aussi l’attribut allow="autoplay" — Videas le fait pour vous dans le code copié.
Habillage du lecteur
| Paramètre (iframe) | Attribut (script) | Défaut | Ce qu’il fait |
|---|---|---|---|
show_chapters |
data-show-chapters |
1 |
Affiche les marqueurs de chapitres |
show_waveform |
data-show-waveform |
1 |
Affiche la forme d’onde d’un audio |
show_playlist |
data-show-playlist |
1 |
Affiche la liste des pistes d’une collection |
show_homepage_info |
data-show-homepage-info |
1 |
Titre et durée sur l’écran d’accroche |
show_homepage_play_button |
data-show-homepage-play-button |
1 |
Grand bouton de lecture sur l’écran d’accroche |
show_eco_mode |
data-show-eco-mode |
1 |
Affiche le bouton mode éco |
show_info_button |
data-show-info-button |
1 |
Affiche le bouton d’informations |
show_thumbnails |
data-show-thumbnails |
0 |
Colonne de vignettes de pages, sur un document |
show_outline |
data-show-outline |
0 |
Sommaire d’un document |
show_ads |
data-show-ads |
1 |
Diffuse les publicités configurées |
show_logo |
data-show-logo |
1 |
Affiche votre logo en filigrane |
show_captions |
data-show-captions |
1 |
Légendes sous les images d’une collection |
enable_pip |
data-enable-pip |
1 |
Autorise l’image dans l’image |
enable_fullscreen |
data-enable-fullscreen |
1 |
Autorise le plein écran |
enable_zoom |
data-enable-zoom |
1 |
Autorise le zoom sur une image |
enable_search |
data-enable-search |
1 |
Recherche dans le texte d’un document |
enable_slideshow |
data-enable-slideshow |
1 |
Diaporama automatique d’une collection d’images |
slideshow_duration |
data-slideshow-duration |
5 |
Durée d’une image du diaporama, en secondes |
Le filigrane du logo n’apparaît qu’une fois la lecture lancée : il n’existe pas sur l’écran d’accroche. C’est normal, et ce n’est pas réglable.
Apparence
| Paramètre (iframe) | Attribut (script) | Défaut | Ce qu’il fait |
|---|---|---|---|
theme |
data-theme |
selon le média | dark, light, ou colorful (audio seulement) |
primary_color |
data-primary-color |
votre préréglage | Couleur d’accent, sans dièse : 884aff |
icon_color |
data-icon-color |
votre préréglage | Couleur des icônes du lecteur audio |
logo_position |
data-logo-position |
barre de contrôle | control_bar, top_left, top_right, bottom_left, bottom_right |
logo_opacity |
data-logo-opacity |
1 |
Opacité du filigrane, de 0 à 1 |
logo_click_url |
data-logo-click-url |
— | Adresse ouverte au clic sur le logo |
poster_fit |
data-poster-fit |
contain |
contain ou cover, pour l’image d’accroche |
collection_display_mode |
data-collection-display-mode |
drawer |
Présentation d’une collection |
Le thème par défaut dépend du média : sombre pour une vidéo, couleur pour un audio (il floute la pochette en fond), clair pour le reste. Le thème colorful n’existe que sur le lecteur audio ; ailleurs il est ramené à clair ou sombre.
Ces quatre-là — thème, couleur, logo, position — sont aussi réglables dans Réglages du lecteur, et c’est presque toujours préférable : ils s’appliquent alors à toutes vos intégrations, y compris celles déjà en ligne.
Dimensions et affichage
La taille ne se règle pas par un paramètre mais par les attributs du code, que Videas écrit pour vous : data-width, data-height et data-aspect-ratio sur une intégration en <script> ; width, height et un style sur une iframe. Laissez le mode responsive activé et le lecteur épouse la largeur de votre page en gardant ses proportions.
L’affichage en bouton (le lecteur s’ouvre par-dessus la page au clic) se règle avec data-embed-mode="popover", data-trigger et data-trigger-label. Il n’existe qu’en <script> : une iframe n’a pas d’équivalent. Tout cela se choisit dans la fenêtre d’intégration, sans écrire une ligne.
Ce que l’URL du lecteur ne fait pas
L’adresse de la page du lecteur (celle que révèle Voir le rendu dans un onglet) sert à vérifier votre réglage, pas à intégrer. Collée telle quelle dans WordPress, Wix, Squarespace ou Webflow, elle produit un lien cliquable, pas un lecteur : ces plateformes n’intègrent automatiquement que les services qu’elles connaissent. Pour intégrer, copiez le code. Seules les pages qui savent intégrer n’importe quelle adresse — Notion, par exemple — acceptent l’URL nue ; Videas vous la donne alors directement, en choisissant Notion comme destination.
À quoi sert chaque réglage : la page produit Player décrit les fonctions que ces paramètres pilotent, là où cette page ne donne que leur écriture exacte.
Quels réglages s’appliquent sans re-copier le code ?
Ceux qui ne sont pas dans le code : thème clair/sombre, couleur d’accent, logo, position du logo, mode éco par défaut. Videas les résout au moment de la lecture, depuis votre préréglage par défaut — vous pouvez donc changer la couleur de votre marque sans toucher à une seule page de votre site.
Tous les autres paramètres, ceux listés dans les tableaux de cet article, sont écrits dans le code que vous avez copié : les modifier n’a aucun effet tant que vous n’avez pas récupéré le code à jour et remplacé celui de votre page.
Pourquoi le code copié ne contient-il pas tous les paramètres ?
Parce que Videas n’écrit que ce qui diffère de vos réglages. Si votre préréglage impose déjà le thème sombre, le code ne contient pas theme : l’intégration suivra votre préréglage.
C’est délibéré, et cela a une conséquence utile : le code reste court, et il continue de refléter vos réglages quand ceux-ci évoluent. À l’inverse, un paramètre présent dans le code gagne toujours — écrire theme=light en dur fige cette intégration, et changer votre préréglage n’aura plus d’effet sur elle.
Comment écrit-on un paramètre en script et en iframe ?
Le nom est le même partout, seule la forme change. En <script>, il s’écrit en minuscules avec des tirets et le préfixe data- : data-auto-play="1". En iframe, il s’écrit en minuscules avec des tirets bas, dans l’URL : ?auto_play=1&muted=1.
Deux conventions à connaître : les valeurs oui/non s’écrivent 1 ou 0, et une couleur s’écrit sans le dièse — primary_color=884aff.
Peut-on coller l’URL du lecteur au lieu du code ?
Non, sauf cas particulier. L’adresse de la page du lecteur sert à vérifier un réglage, pas à intégrer : collée dans WordPress, Wix, Squarespace ou Webflow, elle produit un lien cliquable, pas un lecteur. Ces plateformes n’intègrent automatiquement que les services qu’elles connaissent.
Seules les pages capables d’intégrer n’importe quelle adresse — Notion, typiquement — acceptent l’URL nue. Videas vous la fournit alors directement, en choisissant Notion comme destination dans la fenêtre d’intégration.
L’affichage en bouton existe-t-il en iframe ?
Non. Le mode popover — le lecteur qui s’ouvre par-dessus la page au clic — se règle avec data-embed-mode="popover", data-trigger et data-trigger-label, et n’existe qu’en <script>. Une iframe n’a pas d’équivalent.
C’est l’un des rares écarts fonctionnels entre les deux méthodes. Si votre plateforme filtre le JavaScript et vous impose l’iframe, le mode intégré est votre seule option.
Articles liés
- Intégrer une vidéo sur votre site web — le parcours complet, du code au collage
- Personnaliser le thème du lecteur — couleurs, logo, et ce qui s’applique sans re-copier le code
- Personnaliser le lecteur vidéo — les préréglages, pour ne pas refaire ses choix à chaque média
- Sécuriser une intégration par jeton — restreindre qui peut afficher votre lecteur