/# 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. Use "autoplay" setting to override autoplay on mobile devices only and "autoplay_desktop" to override on desktop as well.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID", "autoplay": false, "autoplay_desktop": 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. Make sure the autoplay when in view setting is enabled for all players.

Example:

document.blockSimultaneousPlay = true;

Pause video content playback after Pre roll ad ended

Use the following option to force the player to pause after successful pre-roll display. The following two options need to be enabled upon the player beforehand:

1. Autoplay
2. Autoplay if ad exists

Essentially with this custom parameter you can make sure that your player will maintain a click to play playback option for your video content after a successful pre-roll is shown.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "pause_after_preroll": 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});

Sticky player CLS

Use this param if your player easily triggers CLS in performance testing. See the demo code below.

Example:

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","simple_stick": 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.

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. Make sure that the player has sticky enabled for this option to work.

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 Targetvideo 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});

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>

Ignore header height when autoplay when 50% in view option is on

If your player is setup to autoplay only when 50% in view and you want to ignore the header height when calculating this percentage, make sure to add the below param:

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

Setup custom waitForTCFApi timeout

Adding the below piece of code to your embed code will force the player to wait for a time specified for the consent to be provided. Time should be specified in miliseconds.
Example:

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

Set custom title above the video in sticky mode

Use the below param to setup custom title above the sticky unit. It will work only when the sticky option "Show title above player" is on.

$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "sticky_title_above_text": "Custom title" });

Set clickthrough URL to open in the same browser window

Use the following param to instruct the player to open the clickthrough URL in the same browser window

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