Intégrez des galeries vidéo

Une simple URL bien pratique et paramétrable vous permet d'intégrer une galerie de vidéos dans une page ou dans un site, dès lors que vos vidéos sont organisées dans une playlist.

La construction est simple : il faut au minimum ajouter l’identifiant de la playlist en paramètre. Exemple :

https://cdn.streamlike.com/hosting/gallery.html?playlist_id=7e0b55bbd4bd0a91

Si vous utilisez l’identifiant de votre compte, vous afficherez tous les médias publics qu’il contient; si vous utilisez un identifiant de vue, vous afficherez tous les médias publics des playlists qu’elle contient.

Sans ajout de paramètres, la page comporte une ligne d’en-tête avec un moteur de recherche et un sélecteur de critère de tri et de sens du tri. Par défaut, les médias sont triés par date de création, de la plus ancienne à la plus récente. Vous pouvez changer tout cela.

Paramètres d’URL

L’ajout de paramètres nécessite de connaître leur syntaxe et les valeurs attendues. Pour cela, référez vous à la documentation des webs e rvices.

Identifiants (au moins un obligatoire)

Paramètre	Type	Description
`playlist_id`	`string`	Identifiant de la playlist
`company_id`	`string`	Identifiant de la société
`view_id`	`string`	Identifiant de la vue

Filtres webservice Streamlike

Paramètre	Type	Défaut	Description
`lng`	`string`	–	Langue du contenu (ex. `fr`, `en`)
`page`	`number`	`0`	Page courante (0-indexée)
`pagesize`	`number`	`12`	Nombre de médias par page (1–100)
`orderby`	`string`	–	Tri : `name`, `duration`, `creationdate`, `hit`, etc.
`sortorder`	`up` \| `down`	–	Sens du tri

Options d’interface

Paramètre	Type	Défaut	Description
`lang`	`fr` \| `en`	`fr`	Langue de l’interface
`embed`	`1` \| `true`	`false`	Mode embed (masque le header)
`columns`	`1`–`6`	`4`	Nombre de colonnes de la grille en affichage paysage
`container`	`container` \| `fluid`	`-`	Applique la classe Bootstrap container ou container-fluid

Options des vignettes

Paramètre	Type	Défaut	Description
`thumbnail_mode`	`scrubbing` \| `animation` \| `fixed`	–	Mode de prévisualisation interactive (`generateThumbnail()` du SDK)
`fit_mode`	`cover` \| `contain`	`cover`	Recadrage de la vignette (`object-fit` pour l’image statique, `fitMode` pour le SDK)

Options CSS

Paramètre	Type	Défaut	Description
`background_color`	`string`	`#f8f9fa`	Couleur de fond de la page
`primary_color`	`string`	`#0d6efd`	Couleur principale (boutons, focus)
`text_color`	`string`	`#212529`	Couleur du texte
`card_bg_color`	`string`	`#ffffff`	Couleur de fond des cartes
`font_size`	`string`	`14px`	Taille de police de base

Exemples

Avant d’intégrer plus bas un exemple de galerie vidéo, voyons comment construire l’URL pour répondre à différents besoins.

Pour masquer l’en-tête, il faut ajouter le paramètre &embed=1. Ajoutons également des paramètres de style pour créer un mode sombre :

https://cdn.streamlike.com/hosting/gallery.html?playlist_id=7e0b55bbd4bd0a91&embed=1&background_color=%23121212&card_bg_color=%231e1e1e&text_color=%23ffffff&primary_color=%23bb86fc

Pour obtenir un affichage sur 4 colonnes (en lecture « paysage »), des instructions en langue anglaise et 20 médias par page:

https://cdn.streamlike.com/hosting/gallery.html?playlist_id=7e0b55bbd4bd0a91&columns=4&lang=en&pagesize=20

Pour trier les vidéos par date de publication, de la plus récente à la plus ancienne, sans afficher l’en-tête, avec 8 médias par page :

https://cdn.streamlike.com/hosting/gallery.html?playlist_id=7e0b55bbd4bd0a91&orderby=releasedate&pagesize=12&columns=6&sortorder=down

Grille container-fluid avec vignettes interactives (scrubbing)
https://cdn.streamlike.com/hosting/gallery.html?playlist_id=c4da86fddd8f0ada&container=fluid&thumbnail_mode=scrubbing

Vignettes en mode animation, recadrage contain

https://cdn.streamlike.com/hosting/gallery.html?playlist_id=c4da86fddd8f0ada&thumbnail_mode=animation&fit_mode=contain

Intégration en iframe

La galerie envoie en permanence sa hauteur via window.parent.postMessage dès le chargement et à chaque changement de taille du DOM. Le message est un JSON stringifié : { "gallery_height": 1234 }.

Exemple d’intégration complète avec redimensionnement automatique de l’iframe :

iframe
  id="streamlike-gallery"
  src="https://cdn.streamlike.com/hosting/gallery.html?playlist_id=VOTRE_PLAYLIST_ID&embed=1"
  width="100%"
  style="border: none; display: block;"
  scrolling="no"
  allowfullscreen>
</iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.origin !== 'https://cdn.streamlike.com') return;
    try {
      var data = JSON.parse(event.data);
      if (typeof data.gallery_height === 'number') {
        document.getElementById('streamlike-gallery').style.height = data.gallery_height + 'px';
      }
    } catch (e) {}
  });
</script>

L’attribut &embed=1 masque la barre de recherche et le tri, recommandé pour une intégration en iframe.