Specific player configurations & debugging

Configuration, loading & debugging

Force players config to always load from CDN instead from local storage

When making changes to the player setup make sure to allow a couple of minutes for the changes to propagate. If you need for any reason, to prevent this and to force the players configuration file to load directly from our CDN every time instead from the users HTML5 local storage. If this is the case, you can add the following parameter to your embed code to utilize this.

Example:

<<company>>.forceConfigLoad = true;
$bp("myDiv", config);

Turn on debug mode

For testing purposes you may want to check what debug information the player provides. Use the following snippet below to enable the players debug information in your browsers console. You can get handy information from this debug specially if you are looking to debug ad display information.

Example:

<<company>>.debug = true;
$bp("myDiv", config);

Override config parameter of the player from embed code

Use the following code snippet to override any parameter in players embed code. The example below will override autoplay setting set on the player level and make sure your player is set to be click-to-play.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID", "autoplay": false});

Specific player behavior

Autoplay only one player on page

If you have more than one autoplay player on the page, you can prevent all of them from autoplaying at once. If the below param is used only the first player which comes into view will start autoplay while all others will be CTP.

Example:

document.blockSimultaneousPlay = true;

Maintain a sticky position

The player supports a specific parameter with which you can force the player to stay in it's sticky position and not return to where the player is located if it is in view. To use this option see the demo code below.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","staySticky":true});

Set offset for sticky player

As many sites have certain functions at for example, the bottom of a site, you may wish for the player to sticky to the bottom of your site but above some HTML elements. This option will allow that by adding the following parameter to your embed code - "inviewBottomOffset". You can also use the below parameters to further configure and tweak sticky player positioning.

Parameter name

Description

inviewTopOffset

Set a top offset in pixels for the sticky player or outstream unit

inviewBottomOffset

Set a bottom offset in pixels for the sticky player or outstream unit

inviewLeftOffset

Set a left offset in pixels for the sticky player or outstream unit

inviewRightOffset

Set a right offset in pixels for the sticky player or outstream unit

closeButtonVerticalOffset

Set a vertical offset in pixels for the sticky player or outstream unit close "X" button

closeButtonHorizontalOffset

Set a horizontal offset in pixels for the sticky player or outstream unit close "X" button

Show player if "acts as outstream" is selected

Use the following code snippet to force the player to display no matter if the player receives an ad or not. This option will only work if the option "acts as in-content/in-slide outstream unit" is selected on the player level. It essentially forces the player to display instead of the basic functionality which is the player displaying only if an ad is present.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "forcePlayerDisplay": true});

Force sticky player behavior programmatically

You can use the following code snippets to force a player to go in sticky mode or un-sticky it.

Example:

$bp('myDiv').SlideInView.transitionSpeed = 300;     // default value 300 - This is the animation sticky speed in ms. Set to 0 to remove animation  
$bp('myDiv').SlideInView.forceShow();           // Force the player to go into sticky mode   
$bp('myDiv').SlideInView.forceHide();            // Un-sticky the player
$bp('myDiv').SlideInView.manualForced = true;       // Force the player to go into "manual" sticky mode - this disables the auto-sticky behavior that the player uses by default

Display player under or in a specific HTML element

You can use the following parameters to create a custom implementation which will force an outstream unit to appear in a specific HTML element or after a user-defined one.

This will example will render the outstream unit inside a specified div.

Example:

$bos("myDiv", {"id":"OUSTREAM_UNIT_ID","width":"480","height":"270", "appendTo": "#myDiv"});

This will example will render the outstream unit inside after the 4th paragraph on the page.

Example:

$bos("myDiv", {"id":"OUSTREAM_UNIT_ID","width":"480","height":"270", "insertAfter": "p:nth-child(4)"});

Set custom share URL's and custom embed codes for sharing

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","customShare": {
    "shareUrl" :"ENTER YOUR CUSTOM URL HERE YOU WANT TO SHARE",
    "embedCode" : "ENTER YOUR CUSTOM EMBED CODE HERE"
}});

Intelligent sticky behavior

If this option is added into the player embed code, the player whenever in sticky mode, will intelligently try to hide itself whenever it senses that it will go over a display banner. As soon as it senses it can fully display again it will return to the sticky position.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","avoidBanners": true});

Player sticky direction

If set to "above", the player will go into sticky mode only if you scroll above the player and vice versa

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","stickyDirection": "above/below"});

Sticky player on mobile only

Using the below example player will be sticky on mobile platforms only.

Example:

$bp("myDiv", {"id":"player_id","width":"480","height":"270","playlist":"playlist_id", "slide_inview": Brid.Util.isMobilePlatform() });

Player size

Set a specific player size on mobile only

You can force a specific width and height value for a player on mobile by using the following parameters:

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","mobileWidth":"100%","mobileHeight":"300"});

Set a specific sticky player size values on mobile

You can force a specific width and height value for a player sticky size on mobile by using the following parameters:

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","mobileWidthSticky":"100%","mobileHeightSticky":"300"});

Set a maximum player width

You can set a specific width for a player by using the "max_width" custom embed code parameter.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","max_width":"300"});

Player appereance

Set player skin

Use the code snippet below to change the players skin on command. The code below will change the player skin to a skin with the ID 170.

Example:

$bp('ID_OF_PLAYER_DIV').changeSkin('170');

Add a custom annotation (custom HTML element) with a click-through to the player.

To add a click-through to a video you can use the following code snippet.

Example:

<script type="text/javascript" src="//<<services_domain>>/player/build/<<player_script>>"></script>
<div id="myDiv" class="<<player_class>>" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"></div>
<script>
    function onReadyAnnotation() {
      console.log("onReadyAnnotation onReadyAnnotation onReadyAnnotation", this.el);
      var annotationDiv = document.createElement('div');
      annotationDiv.style.width = "100px";
      annotationDiv.style.height = "50px";
      annotationDiv.style.position = "absolute";
      annotationDiv.style.top = "0px";
      annotationDiv.style.left = "0px";
      annotationDiv.style.zIndex = "5";
      annotationDiv.style.backgroundColor = "#FFFFFF";
      annotationDiv.style.cursor = "pointer";

      annotationDiv.innerHTML = "Annotation";

      annotationDiv.addEventListener("click", function() {window.open("https://www.google.com",'_blank');}, false)

      this.el.appendChild(annotationDiv);
 }
    $bp("myDiv", {
        "id": "PLAYER_ID",
        "width": "640",
        "height": "360",
        "video": "VIDEO_ID"
    }, onReadyAnnotation);
</script>

Custom close button (Add a custom close button to your embedded Brid player)

You can add a close button to your player which when clicked will remove the entire player from the web page. This custom implementation allows you to set a custom X close button on a player corner of your choosing, define when you want the close button to appear and hide it when/if the player is in sticky mode. See below example on how to use these custom parameters.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","closeButton": {
"position": "top-right", // top-right|top-left|bottom-right|bottom-left 
"show_on": "start", // ad_end|start|number_of_seconds 
"hide_when_sticky": true //true|false
}});

Configure the player to play midroll only when muted

If the below "MidrollOnlyWhenMuted" parameter is added to the embed code, player will load midroll ads only if it is muted. If user un-mutes the player, midrolls will be ignored and will fire only if mute button is clicked again.

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","MidrollOnlyWhenMuted":true});

Configure the player to load banner ads in an iframe

If you want to load banner ads in an iframe instead of the standard way, add the following param to the embed code: "use_iframe_for_banners": true.

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","use_iframe_for_banners":true});

Configure custom prebid variable

If you want to configure the player to use your custom variable for prebidding add the following parameter to the embed code: prebid_variable: 'variable_name'.

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID",prebid_variable: 'pbgs'});

Configure custom prebid timeout

If you want to configure the player to run prebid using your custom timeout use the following parameter: prebid_timeout: 5000

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", prebid_timeout: 5000});

Delay prebid auction

If you want to configure the player to use a specific timeout before it start bidding process, use the following parameter in the embed code: "prebid_wait_time": 2000

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "prebid_wait_time": 2000});

Setup Amazon A9 and PrebidJS to compete

If you want to have Amazon A9 and prebidJS and want them to compete between each other make sure to add the "mergeBidders" parameter to the embed code

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "mergeBidders": true});

Player plugins

Force load of players HLS plugin

If for any reason you need to force load the players HLS plugin, you can do this by adding the following parameter to the players embed code:

Example:

"forceHLS": true

Sending consent string on AMP page

To pass consent string to an ad tag on an AMP page make sure to add the following piece of code in the amp-consent component:

<amp-consent id="consent-element" layout="nodisplay">
<script type="application/json">
{
"exposesTcfApi": true,
....
}
</script>
</amp-consent>

Did this page help you?