Options avancées d'un lecteur intégré : thème, logo

La page Développeur d’un média donne les réglages que le code d’intégration simple ne propose pas : démarrer à un timecode précis, imposer un thème et un logo, enregistrer un préréglage réutilisable, ou brancher l’API. Ouvrez le média, puis l’onglet Développeur.

L’aperçu y est en direct : vous voyez le résultat de chaque réglage avant de copier le code. L’embed simple couvre l’essentiel — voir Intégrer une vidéo sur votre site web ; cette page-ci couvre le reste.

Ce qu’il vous faut

Un média publié dans Videas
Le rôle Éditeur ou supérieur sur l’espace
(recommandé) Avoir déjà mis en place un embed simple — voir Intégrer une vidéo sur votre site web

Étape 1 : Accéder à la page Développeur

Deux entrées :

Depuis la modale Intégrer : tout en bas, cliquez sur la carte Options avancées (icône <>)
Directement : sur la fiche du média, allez sur l’onglet Développeur

La page s’ouvre avec, de haut en bas, les sections Code embed, Préréglages, Paramètres du lecteur, Apparence, Liens directs et identifiants, Référence API.

la page Développeur d’un média avec ses sections Code embed, Préréglages, Paramètres du lecteur et Apparence

Étape 2 : Code embed avec aperçu en direct

En haut de la page, un bloc de code affiche le snippet HTML prêt à copier — identique à celui de la modale Intégrer, mais qui se met à jour en temps réel quand vous modifiez les options en dessous.

Aperçu en direct

Bouton Afficher l’aperçu (icône œil) : déplie un lecteur fonctionnel configuré exactement comme votre snippet final. Très utile pour :

Vérifier l’effet d’une option (autoplay, mode théâtre, position du logo) sans coller dans votre site
Tester un préréglage avant de l’appliquer en production
Ajuster la couleur principale ou la position du logo en visualisant immédiatement le résultat

Indicateur “Code obsolète”

Si vous avez copié le code, puis modifié une option ensuite, le bloc passe en fond orange avec la mention “Recopier le code”. Vous savez ainsi que ce qui est sur votre site n’est plus à jour par rapport aux options actuelles.

Étape 3 : Gérer les préréglages d’embed

Les préréglages permettent de figer une combinaison d’options réutilisable sur tous les embeds de l’espace ou de l’organisation. C’est l’outil qui garantit la cohérence visuelle et qui évite de re-configurer chaque embed à la main.

Appliquer un préréglage

Cliquez sur la carte d’un préréglage : toutes les options du lecteur s’alignent dessus. Une bannière bleue apparaît : “Préréglage [nom] appliqué — les options sont verrouillées en lecture seule”.

un préréglage appliqué : la carte marquée « Par défaut » sélectionnée et les options qu’elle impose

Personnaliser un préréglage en cours

Cliquez sur Personnaliser dans la bannière : vous entrez en mode édition. Une bannière orange signale que vous êtes en train de modifier le préréglage. Validez vos changements pour les enregistrer.

Sauvegarder une nouvelle configuration

Cliquez sur la carte Enregistrer comme préréglage (icône +). Une boîte de dialogue s’ouvre :

Nom : descriptif (par exemple “Light + autoplay muted — landing page”)
Scope :
- Espace de travail : préréglage disponible uniquement dans cet espace
- Organisation : préréglage partagé avec tous les espaces de votre organisation (rôle Admin organisation requis)
Définir comme défaut (coche) : ce préréglage sera appliqué automatiquement à tout nouvel embed dans le scope choisi

Promouvoir un préréglage espace → organisation

Sur un préréglage espace de travail (badge Espace), le menu 3-points propose Promouvoir à l’organisation : il devient accessible à tous les espaces. Pratique quand un préréglage utilisé par une équipe se révèle pertinent pour l’ensemble.

Définir par défaut / supprimer

Le menu 3-points propose aussi :

Définir comme préréglage par défaut (badge étoile orange) — appliqué d’office sur tout nouvel embed
Retirer le défaut si déjà défini
Supprimer le préréglage

Encadré : si la personnalisation est verrouillée par l’admin — un message d’information apparaît : “La personnalisation est verrouillée par votre administrateur. Seuls les préréglages disponibles peuvent être appliqués.” Vous ne pouvez plus régler les options à la main, uniquement choisir parmi les préréglages publiés.

Étape 4 : Paramètres avancés du lecteur

Section dédiée aux options qui n’apparaissent pas dans la modale Intégrer simple.

Démarrer à (timecode)

Champ Démarrer à (vidéo et audio uniquement). Saisissez un timecode (MM:SS ou HH:MM:SS, par exemple 2:30) : la lecture commencera à cet instant au chargement.

Cas d’usage : créer un embed sur un passage spécifique d’une longue vidéo (un témoignage à 12 dans une conférence d’1 heure), sans avoir à éditer la vidéo source.

Page de départ (PDF)

Champ Page de départ (document PDF uniquement). Numéro de page à afficher au chargement (1, 2, 3…). Idéal pour pointer vers un chapitre précis d’un document long.

Durée du diaporama (image)

Champ Durée du diaporama (image uniquement). Valeur en secondes (1-60), durée d’affichage de chaque image avant passage à la suivante.

Cadrage du poster (vidéo)

Choix entre deux modes pour la vignette d’aperçu affichée avant la lecture :

Contenir (par défaut) : la vignette est entièrement visible, avec des bandes si besoin
Couvrir : la vignette remplit toute la zone, avec un éventuel rognage

Mode d’affichage (collection vidéos)

Trois options : Drawer (tiroir), Bottom Bar (barre du bas), Sidebar (barre latérale). Voir Intégrer une vidéo sur votre site web pour les usages.

Avertissement autoplay

Si vous activez Lecture automatique sans activer Muet, un avertissement visuel inline apparaît à côté du toggle : “La plupart des navigateurs bloquent la lecture automatique avec son. Activez aussi le mode muet pour un démarrage fiable.” C’est un garde-fou contre l’erreur la plus courante des intégrations vidéo web.

Étape 5 : Apparence

Section dédiée à l’identité visuelle du lecteur. Configurable par embed, mais idéalement figée dans un préréglage organisation pour la cohérence.

Thème

Vidéo, collections, documents : choix entre Sombre (défaut) et Clair
Audio : trois choix — Clair, Sombre, Coloré (extrait d’une couleur dominante de la pochette)

Couleur principale

Color picker (sélecteur HEX) pour la couleur d’accent (boutons, barre de progression, icônes actives). À ajuster à la couleur officielle de votre marque (par exemple #1A73E8 pour un bleu corporate).

Bouton Réinitialiser pour revenir à la couleur par défaut Videas (violet).

Logo

Toggle Afficher le logo : superpose votre logo Videas sur le lecteur. Si activé, sous-options (vidéo uniquement, les images et documents pinent automatiquement en bas-droite) :

Position : 4 coins (haut-gauche, haut-droite, bas-gauche, bas-droite)
Opacité : slider 0-100% (typiquement 60-80% pour un effet discret)
URL au clic : lien externe ouvert quand le visiteur clique sur le logo (votre site, votre page LinkedIn…)

Couleur d’accent (audio)

Color picker spécifique au lecteur audio, pour la forme d’onde et les éléments interactifs.

Étape 6 : Liens directs et identifiants

Section qui rassemble les 4 identifiants techniques copiables, utiles pour les intégrations custom.

Identifiant	À quoi ça sert
Asset ID (UUID)	Identifiant stable du média Videas. À utiliser dans tout script qui référence le média (analytics, intégration custom, appels API)
Embed ID (UUID)	Identifiant de la configuration embed courante. Différent du Asset ID — un même média peut avoir plusieurs embeds avec des configurations différentes
URL de l’embed	URL src directe utilisable comme valeur d’attribut `src` sur une iframe HTML
URL de téléchargement source (si activée)	Lien direct vers le fichier source (vidéo, audio, image originale). Utile pour des scripts batch ou des intégrations qui ont besoin du fichier brut, pas pour la diffusion publique

À retenir : ne partagez pas l’URL de téléchargement source dans des contextes publics. C’est un lien direct vers le fichier original, contournant les protections du lecteur (mot de passe, expiration de partage…). Réservez-la aux scripts internes et aux prestataires explicitement autorisés.

Étape 7 : Référence API

La page intègre des exemples API prêts à copier dans 3 langages :

cURL (terminal, scripts shell)
JavaScript (Node.js, frontend)
Python (scripts back-end, automatisation)

Deux endpoints documentés directement avec votre assetId :

GET Récupérer les métadonnées de l’embed — pour afficher dynamiquement les options ou diffuser via une intégration custom
POST Récupérer l’URL de lecture — pour générer un flux à la demande dans un contexte authentifié

Pour le détail complet de l’API (tokens, scopes, autres endpoints, gestion d’erreurs) voir :

Accéder à l’API Videas (développeurs)
La documentation API Videas (interactive, toujours à jour)

Bonnes pratiques

Privilégier les préréglages aux configurations à la volée

Si vous publiez plus de 5 embeds, créez un préréglage dès le second. Vous gagnerez du temps à chaque nouvel embed et vous garantirez la cohérence visuelle de votre site. La promotion espace → organisation est précieuse quand un format se révèle adapté à l’ensemble de votre activité.

Documenter le préréglage dans son nom

“Préréglage 1” est inutile. Préférez : “Light + autoplay muted — landing page produit” ou “Sombre + logo BL + accent corporate — embed témoignages”. Le nom doit suffire à savoir où et pourquoi utiliser ce préréglage.

Tester avec l’aperçu en direct avant de copier

L’aperçu en direct vous évite de coller un embed mal configuré sur votre site, de constater le problème en production, et de revenir corriger. Toujours vérifier l’aperçu avant un déploiement — surtout sur les options visuelles (couleur, logo, thème).

Réinitialiser un préréglage par défaut prudemment

Le préréglage par défaut s’applique à tout nouvel embed dans le scope. Si vous le changez en cours de route, les anciens embeds gardent leur configuration (ils ne se mettent pas à jour automatiquement). Mais tout nouvel embed créé après le changement utilisera le nouveau défaut.

Sécuriser l’usage de l’API

Les exemples API affichés utilisent des tokens d’authentification. Suivez les bonnes pratiques de gestion : tokens dédiés par intégration, scopes minimaux, rotation régulière. Voir Accéder à l’API Videas (développeurs) pour la procédure complète.

Comment intégrer un passage précis d’une longue vidéo ?

Avec le champ Démarrer à de la section Paramètres du lecteur, sur la page Développeur. Saisissez un timecode au format MM:SS ou HH:MM:SS (par exemple 12:45) : la lecture commencera à cet instant au chargement de l’embed.

C’est ce qui vous évite de découper la vidéo source pour citer un témoignage au milieu d’une conférence d’une heure. Le même principe existe pour les autres types de média : Page de départ pour un PDF, Durée du diaporama pour une image.

Asset ID et Embed ID : quelle différence ?

L’Asset ID identifie le média lui-même, de façon stable — c’est celui à utiliser dans un script d’analytics, une intégration sur mesure ou un appel API. L’Embed ID identifie une configuration d’intégration : un même média peut porter plusieurs embeds avec des réglages différents, et donc plusieurs Embed ID.

Retenez la règle : si votre code parle du média, prenez l’Asset ID ; s’il parle d’un affichage particulier, prenez l’Embed ID.

Peut-on diffuser l’URL de téléchargement source ?

Non, pas publiquement. C’est un lien direct vers le fichier original qui contourne les protections du lecteur — mot de passe, expiration de partage, restriction de domaines n’ont aucun effet sur elle.

Réservez-la aux scripts internes et aux prestataires explicitement autorisés. Pour une diffusion publique, utilisez le code d’intégration ou un lien de partage, qui restent révocables.

À partir de combien d’embeds faut-il créer un préréglage ?

Dès le deuxième. Un préréglage fige une combinaison d’options réutilisable et vous évite de reconfigurer chaque embed à la main — c’est ce qui garantit que tous vos lecteurs se ressemblent.

Un préréglage s’enregistre au niveau de l’espace de travail ou de l’organisation, et peut être promu de l’un à l’autre quand il s’avère utile au-delà de son équipe d’origine. Nommez-le pour qu’il se choisisse seul : « Clair + autoplay muet — landing page produit » vaut mieux que « Préréglage 1 ».

Changer le préréglage par défaut met-il à jour les embeds existants ?

Non. Les embeds déjà collés gardent leur configuration : le nouveau défaut ne s’applique qu’aux embeds créés après le changement.

C’est prudent, mais cela veut dire qu’une refonte visuelle ne se propage pas toute seule — il faut recopier le code sur les pages concernées. Prévoyez-le avant de changer un défaut appliqué à toute l’organisation.

Pourquoi ne puis-je plus régler les options à la main ?

Parce qu’un administrateur a verrouillé la personnalisation. Le message « La personnalisation est verrouillée par votre administrateur » apparaît alors, et vous ne pouvez plus choisir que parmi les préréglages publiés.

C’est un réglage volontaire, destiné à garantir une identité visuelle homogène. Pour obtenir une variante, demandez à un Admin de votre organisation de publier un préréglage supplémentaire plutôt que de chercher à contourner le verrou.

En résumé

La page Développeur d’un média (onglet dédié ou bouton Options avancées depuis la modale Intégrer) regroupe 5 sections : code embed avec aperçu, préréglages, paramètres du lecteur, apparence, liens directs et identifiants, référence API
Aperçu en direct : visualisez le rendu avant de coller dans votre site
Préréglages : sauvegardez en scope espace ou organisation, définissez un défaut, promouvez un préset workspace au niveau organisation, marquez par étoile
Paramètres avancés uniques à cette page : Démarrer à (timecode), Page de départ (PDF), Durée du diaporama (image), Cadrage du poster (vidéo)
Apparence : thèmes (clair/sombre, +coloré sur audio), couleur principale par color picker, logo (position, opacité, URL au clic)
4 identifiants techniques copiables : asset ID, embed ID, URL embed, URL de téléchargement source (à réserver aux scripts internes)
Référence API intégrée : exemples cURL, JavaScript, Python avec votre assetId ; pour le détail des tokens et scopes, voir l’article API dédié

Articles liés

Les captures sont prises sur Videas Academy, une chaîne d'exemple créée pour ce centre d'aide. Elle appartient à un client fictif, pas à Videas : votre chaîne porte votre nom, votre identité et vos tarifs.