Create a carousel of videos from a playlist

Configuration

Control Panel

The following options are configurable from the control panel

item value
Create a tab called 'All' to list all videos Yes/No
Implement video search using HTML5 datalist element Yes/No Defaults to a searchable selectbox
Title of video to use in carousel video-title/media-title
White list of tabs Comma separated list of tabs to be created

Events

butoTabCarouselCreated

Fired when a carousel of videos for a particular tab has been created. This event occurs each time a tab is selected.

var event_data = {
                data: {
                    playlistId: playlistId,
                    tagId: tagId
                }
            };
ButoPlaylistTabbed.eventEmitter.emit('butoTabCarouselCreated', event_data);

ButoTabbedCarouselItemSelect

Fired when a video in the carousel is selected.

var event_data = {
                    data: {
                        playlistId: config.playlistId,
                        originalEvent: e
                    }
                };
ButoPlaylistTabbed.eventEmitter.emit('ButoTabbedCarouselItemSelect', event_data);

butoTabbedCarouselNavigate

Fired when the carousel navigation buttons (left and right) are clicked. The original event details are made available to.

ButoPlaylistTabbed.eventEmitter.emit('butoTabbedCarouselNavigate', e);

butoTabbedPlaylistWindowResize

Fired when the the browser window changes size.

ButoPlaylistTabbed.eventEmitter.emit('butoTabbedPlaylistWindowResize');

ButoPlaylistTabbedReady

Fired when the carousel embed has fully loaded onto the page.

var event_data = {
                data: {
                    playlistId: config.playlistId
                }
            };
ButoPlaylistTabbed.eventEmitter('ButoPlaylistTabbedReady', event_data);

ButoTabbedSearchCreated

Fired when the search selectbox/input element has been created for a particular instance of the carousel.

var event_data = {
                data: {
                    playlistId: config.playlistId
                }
            };
ButoPlaylistTabbed.eventEmitter.emit('ButoTabbedSearchCreated', event_data);

ButoTabbedTabsCreated

Fired when the tabs for a particular instance of the carousel widget have been created

var event_data = {
                data: {
                    playlistId: config.playlistId
                }
            };
ButoPlaylistTabbed.eventEmitter.emit('ButoTabbedTabsCreated', event_data);

ButoTabbedVideoLoaded

Fired when a video loads into the main/hero section of the widget

var event_data = {
                data: {
                    playlistId: playlistId
                }
            };
ButoPlaylistTabbed.eventEmitter.emit('ButoTabbedVideoLoaded', event_data);