Introduction

Embedding Playlist widget

Using a simple JavaScript embed code you can embed a playlist widget contained of one large player and a couple small images around it. By clicking on the specific image in the list user will be able to display that specific video in the player. Users can also scroll through the playlist depending on how many videos are included in the playlist.

Playlist Widget Initialization

Use this API call to check when a Targetvideo playlist widget is ready for API usage.

$BridWidgets.init(config)

This is the suggested method to use to check if a playlist widget is ready for API usage via a callback.

Example:

function onReady(){
console.log("Widget is ready!");
}
$BridWidgets.init({"id":1503492079,"playerId":"9481","partnerId":"8080","playlistType":"0","categoryId":"","tag":"","height":"400","color":"ffffff","autoplay":0, "onReady": onReady});

Customize Playlist widget

Force display of thumbnails on mobile devices when using playlist widgets

By default, a Targetvideo playlist widget will display as a standard player on mobile for better usability. If you want to maintain the look and feel of the playlist widget as it displays on desktop with thumbnails below the player, you can force this setting through the widgets embed code by adding "forceThumbs":true to the embed code like this:

BridWidgets.init({"id":myDiv,"playerId":"PLAYER_ID","partnerId":"SITE_ID","playlistId":"PLAYLIST_ID","height":"400","mobileHeight":"400","color":"ffffff","playlistType":"0","autoplay":0,"shuffle":0, "forceThumbs":true});

Playlist widget configuration options

Binding events

Always prefix the Widget ID with Targetvideo so you can ensure a uniqueness of the div element that is used by the player and this should be referenced when attaching to a player event.

Example:

$bWidgets.init({"id":"widget_1554288217","playerId":"8875","partnerId":"7612","playlistId":"5804","height":"400","mobileHeight":"400","color":"ffffff","playlistType":"0","autoplay":0,"shuffle":0});

$bp('Brid_widget_1554288217').add('adStart', function(){

});