All Collections
Embedding + Player Settings
Player Settings
Better Customize the Appearance of the BoxCast Player's Related Videos Section
Better Customize the Appearance of the BoxCast Player's Related Videos Section

This article outlines how adding additional snippets to the BoxCast embed code can provide different looks for the Related Videos section.

Jim Zeller avatar
Written by Jim Zeller
Updated over a week ago

When using the Full Featured layout for a BoxCast embedded player, the Related Videos section of the player defaults to displaying five broadcasts per page, most of them being past broadcasts, and with only showing up to one upcoming (future) or current broadcast. However, what if you want to show more than one upcoming broadcast that's been scheduled? What about only past broadcasts? Perhaps five broadcasts per page isn't enough, you want ten displayed per page! Follow the steps in the sections below, for adding code snippets to your embed and achieving the different appearances.

NOTE: The following embed snippets only work with JavaScript code.

Determine the Base Code to Modify

Navigate to the Embed section of the BoxCast Dashboard and select the player features you want to be reflected in the embedded player. Again, JavaScript and Full Featured must be selected as the Embed Type and Preset, respectively. We've chosen to use a player that is filtered By Channel, but this is not required.

Copy the resulting embed code by clicking the Copy button, and then paste in some type of text editor, like Microsoft Word or Notepad (as examples).

The embed code below (with no added snippets) will access all past public broadcasts, as well as up to one future/current broadcast. The display order, from top to bottom, is most recent to oldest. This will be our example code we add to in the following sections of this article.

<div id="boxcast-widget-h7zvbotjhpti0ej2gqtj"></div><script type="text/javascript" charset="utf-8">(function(d, s, c, o) {var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];var h = (('https:' == document.location.protocol) ? 'https:' : 'http:');js.src = h + '//js.boxcast.com/v3.min.js';js.onload = function() { boxcast.noConflict()('#boxcast-widget-'+c).loadChannel(c, o); };js.charset = 'utf-8';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'h7zvbotjhpti0ej2gqtj', {"showTitle":1,"showDescription":1,"showHighlights":1,"showRelated":true,"defaultVideo":"next","market":"internal","showDonations":true,"showCountdown":true,"showDocuments":true,"showIndex":true,"showChat":true,"layout":"playlist-to-right"}));</script>

Note that the following snippets must be inserted directly before }));</script>

Show all Future Broadcasts

Adding the following snippet to the base embed code will access all public broadcasts, future and past. The display order, from top to bottom, is most future-scheduled to oldest.

,"relatedBroadcastsQuery": { "q": 'timeframe:past timeframe:current timeframe:preroll timeframe:future', "s" : '-starts_at'}

Example:

<div id="boxcast-widget-h7zvbotjhpti0ej2gqtj"></div><script type="text/javascript" charset="utf-8">(function(d, s, c, o) {var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];var h = (('https:' == document.location.protocol) ? 'https:' : 'http:');js.src = h + '//js.boxcast.com/v3.min.js';js.onload = function() { boxcast.noConflict()('#boxcast-widget-'+c).loadChannel(c, o); };js.charset = 'utf-8';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'h7zvbotjhpti0ej2gqtj', {"showTitle":1,"showDescription":1,"showHighlights":1,"showRelated":true,"defaultVideo":"next","market":"internal","showDonations":true,"showCountdown":true,"showDocuments":true,"showIndex":true,"showChat":true,"layout":"playlist-to-right","relatedBroadcastsQuery": { "q": 'timeframe:past timeframe:current timeframe:preroll timeframe:future', "s" : '-starts_at'}}));</script>

Show Only Past Broadcasts

Adding the following snippet to the base embed code will ONLY access past broadcasts. The display order, from top to bottom, is most recent to oldest.

,"relatedBroadcastsQuery": {"q": 'timeframe:past', "s": '-starts_at'}

Example:

<div id="boxcast-widget-h7zvbotjhpti0ej2gqtj"></div><script type="text/javascript" charset="utf-8">(function(d, s, c, o) {var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];var h = (('https:' == document.location.protocol) ? 'https:' : 'http:');js.src = h + '//js.boxcast.com/v3.min.js';js.onload = function() { boxcast.noConflict()('#boxcast-widget-'+c).loadChannel(c, o); };js.charset = 'utf-8';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'h7zvbotjhpti0ej2gqtj', {"showTitle":1,"showDescription":1,"showHighlights":1,"showRelated":true,"defaultVideo":"next","market":"internal","showDonations":true,"showCountdown":true,"showDocuments":true,"showIndex":true,"showChat":true,"layout":"playlist-to-right","relatedBroadcastsQuery": {"q": 'timeframe:past', "s": '-starts_at'}}));</script>

Show Only Current + Future Broadcasts

Adding the following snippet to the base embed code will ONLY access live and future broadcasts. The display order, from top to bottom, is most recently started (if live and streaming concurrent broadcasts) to most upcoming.

,"relatedBroadcastsQuery": {"q": 'timeframe:future timeframe:preroll timeframe:current', "s": 'starts_at'}

Example:

<div id="boxcast-widget-h7zvbotjhpti0ej2gqtj"></div><script type="text/javascript" charset="utf-8">(function(d, s, c, o) {var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];var h = (('https:' == document.location.protocol) ? 'https:' : 'http:');js.src = h + '//js.boxcast.com/v3.min.js';js.onload = function() { boxcast.noConflict()('#boxcast-widget-'+c).loadChannel(c, o); };js.charset = 'utf-8';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'h7zvbotjhpti0ej2gqtj', {"showTitle":1,"showDescription":1,"showHighlights":1,"showRelated":true,"defaultVideo":"next","market":"internal","showDonations":true,"showCountdown":true,"showDocuments":true,"showIndex":true,"showChat":true,"layout":"playlist-to-right","relatedBroadcastsQuery": {"q": 'timeframe:future timeframe:preroll timeframe:current', "s": 'starts_at'}}));</script>

Display a Specified Number of Related Videos

The default number of broadcasts showing in the Related Videos section at one time (on one page) is five. Additional broadcasts can be found by clicking "Next Page". However, this value can be changed. If using any of the previous mentioned variations of the "relatedBroadcastsQuery" snippet and wanting to change the maximum number of videos that display on each page, the following snippet may be inserted (n being the number of videos you wish to display per page) before "s": 'starts_at'}}));</script>

"l":n,

Example (10 videos per page):

<div id="boxcast-widget-h7zvbotjhpti0ej2gqtj"></div><script type="text/javascript" charset="utf-8">(function(d, s, c, o) {var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];var h = (('https:' == document.location.protocol) ? 'https:' : 'http:');js.src = h + '//js.boxcast.com/v3.min.js';js.onload = function() { boxcast.noConflict()('#boxcast-widget-'+c).loadChannel(c, o); };js.charset = 'utf-8';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'h7zvbotjhpti0ej2gqtj', {"showTitle":1,"showDescription":1,"showHighlights":1,"showRelated":true,"defaultVideo":"next","market":"internal","showDonations":true,"showCountdown":true,"showDocuments":true,"showIndex":true,"showChat":true,"layout":"playlist-to-right","relatedBroadcastsQuery": {"q": 'timeframe:future timeframe:preroll timeframe:current', "l":10,"s": 'starts_at'}}));</script>


โ€‹

If any additional questions about what's been shared in this article, please email BoxCast Technical Support at questions@boxcast.com. We would be happy to help assist!

Did this answer your question?