Skip to main content

Examples

Playlist layout examples​

Autoplay on hover​

<bam-playlist org-id="your-org-id" autoplay="hover"></bam-playlist>

Autoplay as cascade​

Play a few seconds of each video sequentially.

<bam-playlist org-id="your-org-id" autoplay="cascade"></bam-playlist>

Position players in a grid​

Render players in a grid (fills available horizontal space and expands downwards).

<bam-playlist org-id="your-org-id" mode="grid"></bam-playlist>

Position players on a row​

Render all players on a single row (scrolling sideways).

<bam-playlist org-id="your-org-id" mode="row"></bam-playlist>

Focus modes​

Show players in a full-window "carousel" when a user clicks on a player.

<bam-playlist org-id="your-org-id" focus-mode="carousel"></bam-playlist>

Click to focus a single player​

Open players individually in a full-window.

<bam-playlist org-id="your-org-id" focus-mode="single"></bam-playlist>

Click to pause​

Let viewers pause autoplaying players by clicking on them.

<bam-playlist org-id="your-org-id" focus-mode="playpause"></bam-playlist>

Disable click on player​

<bam-playlist org-id="your-org-id" focus-mode="none"></bam-playlist>

Zoom in on hover​

Zoom players when the mouse cursor hovers over them.

<bam-playlist org-id="your-org-id" settings="zoomOnHover:true"></bam-playlist>

Player settings​

Show or hide product cards (default on)​

products:true
products:false
<bam-playlist org-id="your-org-id" player-settings="products:true"></bam-playlist>
<bam-playlist org-id="your-org-id" player-settings="products:false"></bam-playlist>

Control the layout of product cards​

productCardMode:default
productCardMode:thumbnail
productCardMode:full
<bam-playlist org-id="your-org-id" player-settings="productCardMode:default"></bam-playlist>
<bam-playlist org-id="your-org-id" player-settings="productCardMode:thumbnail"></bam-playlist>
<bam-playlist org-id="your-org-id" player-settings="productCardMode:full"></bam-playlist>

Show or hide video title (default on)​

title:true
title:false
<bam-playlist org-id="your-org-id" player-settings="title:true"></bam-playlist>
<bam-playlist org-id="your-org-id" player-settings="title:false"></bam-playlist>

Wrap title (default on)​

overlayTextWrap:true
overlayTextWrap:false
<bam-playlist org-id="your-org-id" player-settings="overlayTextWrap:true"></bam-playlist>
<bam-playlist org-id="your-org-id" player-settings="overlayTextWrap:false"></bam-playlist>

Auto-detect fonts (default on)​

Font family used for title & products will be inherited from the H1 font-family is set on the page where you embed the playlist

autoDetectFonts:true
autoDetectFonts:false
<bam-playlist org-id="your-org-id" player-settings="autoDetectFonts:true"></bam-playlist>

Playlist styling with CSS variables​

Non-exhaustive list of examples. See the full list of styling options.

Control the rounding of the player corners​

:root {
 --bam-player-corner-radius: 10px;
}

Control the gap between players​

:root {
 --bam-playlist-gap: 0px;
}

Combinations​

Stories​

Make a playlist appear as a story by setting soft-limit="1" player-fit="exact-size" and the CSS variables below.

:root {
  --bam-player-height: 100px;
  --bam-player-width: 100px;
  --bam-player-corner-radius: 100%;
}

Control functions​

Scrolling back and forward using custom buttons​

The buttons shown in the example below are the browser's default buttons, you can style these to appear in any way you like.

<bam-playlist id="my-playlist" org-id="YOUR_ORG_ID"></bam-playlist>

<button id="left">Left</button>
<button id="right">Right</button>
<script>
const myPlaylist = document.getElementById('my-playlist');
const leftButton = document.getElementById('left');
const rightButton = document.getElementById('right');
leftButton.onclick = () => myPlaylist.scrollBackward();
rightButton.onclick = () => myPlaylist.scrollForward();
</script>