Skip to main content

Distributing videos

If you followed the Integration guide you might want to start adding videos to your playlists.

There are three ways to distribute videos using the Bambuser playlist component:

  1. Curated playlists: Manage content, pages and playlists from the Bambuser dashboard.
  2. Automatic playlists on PDPs: Automatically creates a playlist with videos relevent to a product by SKU.
  3. Static video assignment: Directly specify which videos to display using the video-ids attribute.

1. Curated playlists​

To manually distribute videos to a playlist on your page, follow these steps:

  1. Go to the "Pages" section in your workspace.
  2. Locate and select the URL of your page from the list.
  3. Click on the page to view its playlist configuration.
  4. Add the videos you want to display on your page, or add tags to automatically include all videos with matching tags.

This method gives you complete control over which videos appear on specific pages of your website.

How the Bambuser Playlist Loads Curated Playlists​

When you add the <bam-playlist org-id="YOUR_ORG_ID"> component to a page, it automatically:

  1. Identifies the current page URL
  2. Queries the Bambuser API for playlists configured for that URL within your account
  3. Retrieves playlist configurations, including video selections and style settings
  4. Loads and displays all videos assigned to that playlist with the applied styling

Implementation requires your organization ID:

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

Each playlist web component handles its own rendering, applying configurations and style settings defined on the web component attributes or in your Bambuser workspace on the playlist settings.

2. Automatic playlists based on PDPs​

To automatically display videos on a PDP, follow these steps:

  1. Upload a video to your workspace.
  2. Add a product to the video and ensure you enter the URL of your PDP.
  3. The playlist integrated into your PDP will now automatically find the video.
Requirements

This method requires that the playlist can find the SKU on the PDP. The playlist uses multiple methods to locate the SKU, primarily by looking for a Product schema.

How It Works​

The automatic playlist feature creates a dynamic connection between your product pages and relevant shoppable videos:

When you embed the <bam-playlist> web component on your Product Detail Pages (PDPs), it automatically creates relevant playlists by:

  1. Scanning your page: The component reads your product data using the same scraping techniques described in the Product data scraping documentation.

  2. Finding product references: It extracts the product reference (SKU) from your page using this priority order:

    • Schema.org markup (JSON-LD or Microdata)
    • OpenGraph meta-tags
    • Generic HTML tags

  3. Matching with videos: It finds all videos in your content library that include products with the same reference.

Implementation Example​

To implement automatic playlists on your PDPs:

  1. Upload videos to your Bambuser workspace
  2. Add products to your videos with accurate product references/SKUs
  3. Add the <bam-playlist> component to your PDP template:
<bam-playlist org-id="YOUR_ORG_ID"></bam-playlist>

The component will handle the rest - scanning your page for product data and displaying all relevant videos that feature the product.

This automatic connection ensures your customers always see relevant video content featuring the products they're viewing.

3. Static video assignment via Video IDs​

You can also directly specify which videos should appear in a playlist by providing video IDs to the <bam-playlist> component:

  1. Use the video IDs of the content you want to display
  2. Add these IDs directly to the video-ids attribute of the component

You can also place multiple playlist components on the same page, each with different video IDs.

Implementation Example​

You can add one or more <bam-playlist> web components with different video selections:

<bam-playlist 
  video-ids="puv_qLTxiftQPcJYDAxXuxsgTh,puv_J2VZRPAV1FqWDqeRvWuZkz">
</bam-playlist>

<bam-playlist 
  video-ids="puv_3xYz1234AbCdEfGhIjKlMn">
</bam-playlist>

Finding Video IDs​

To get a video's ID:

  1. Go to the Videos page in your Bambuser dashboard
  2. Click on a video to open it
  3. Look at the URL in your browser: 
    https://lcx.bambuser.com/YOUR_ORG_ID/on-demand/videos/puv_qLTxiftQPcJYDAxXuxsgTh/setup
  4. The video ID is the part after /videos/ and before the next slash (e.g., puv_qLTxiftQPcJYDAxXuxsgTh)

This method gives you direct control over playlist content without requiring dashboard configuration or product data matching. It's particularly useful for:

  • Creating custom collections on category pages
  • Featuring specific videos on landing pages
  • Implementing hardcoded playlists where dynamic behavior isn't needed

Troubleshooting​