Embed video galleries

A simple, convenient, and customizable URL lets you embed a video gallery on a page or website, as long as your videos are organized into a playlist.

The structure is simple: you must include at least the playlist ID as a parameter. Example:

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

If you use your account ID, you will display all the public media it contains; if you use a view ID, you will display all the public media from the playlists it contains.

Without adding any parameters, the page includes a header row with a search bar and a selector for sort criteria and sort order. By default, media is sorted by creation date, from oldest to newest. You can change all of this.

URL Parameters

To add parameters, you need to know their syntax and the expected values. For more information, refer to the web services documentation.

Identifiers (at least one is required)

Parameter	Type	Description
`playlist_id`	`string`	playlist identifier
`company_id`	`string`	company identifier
`view_id`	`string`	view identifier

Filtres webservice Streamlike

Parameter	Type	Default	Description
`lng`	`string`	–	content language (ex. `fr`, `en`)
`page`	`number`	`0`	current page (0-indexed)
`pagesize`	`number`	`12`	number of media per page (1–100)
`orderby`	`string`	–	sorting order : `name`, `duration`, `creationdate`, `hit`, etc.
`sortorder`	`up` \| `down`	–	sorting direction

Options d’interface

Paramètre	Type	Défaut	Description
`lang`	`fr` \| `en`	`fr`	interface language
`embed`	`1` \| `true`	`false`	embed mode (hides the header)
`columns`	`1`–`6`	`4`	number of columns of the display grid in landscape mode
`container`	`container` \| `fluid`	`-`	applies the container or container-fluid Bootstrap class

Thumbnail options

Parameter	Type	Default	Description
`thumbnail_mode`	`scrubbing` \| `animation` \| `fixed`	–	interactive preview mode (`generateThumbnail()` of the SDK)
`fit_mode`	`cover` \| `contain`	`cover`	cropping the thumbnail (object-fit for the static image, fitMode for the SDK)

CSS Options

Parameter	Type	Default	Description
`background_color`	`string`	`#f8f9fa`	page background color
`primary_color`	`string`	`#0d6efd`	main color (buttons, focus)
`text_color`	`string`	`#212529`	text color
`card_bg_color`	`string`	`#ffffff`	cards background color
`font_size`	`string`	`14px`	base font size

Examples

Before including an example of a video gallery below, let’s look at how to construct the URL to meet different needs.

To hide the header, add the parameter &embed=1. Let’s also add style parameters to create a dark mode:

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

To view the content in a 4-column layout (in landscape mode), with instructions in English and 20 media items per page:

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

To sort videos by publication date, from newest to oldest, without displaying the header, with 8 items per page:

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

Container-fluid grid with interactive thumbnails (scrubbing)

https://cdn.streamlike.com/hosting/gallery.html?playlist_id=d1a2a5b9f23759d6&container=fluid&thumbnail_mode=scrubbing

Thumbnails in animation mode, cropping container

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

Irame integration

The gallery continuously sends its height via window.parent.postMessage as soon as it loads and whenever the DOM resizes. The message is a JSON string: { “gallery_height”: 1234 }.

Example of full integration with automatic iframe resizing:

iframe
  id="streamlike-gallery"
  src="https://cdn.streamlike.com/hosting/gallery.html?playlist_id=YOUR_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>

The &embed=1 attribute hides the search bar and sorting options; this is recommended for iframe integration.