Brid

The Brid Developer Hub

Welcome to the Brid developer hub. You'll find comprehensive guides and documentation to help you start working with Brid as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Specific player configurations & debuging

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="<<company_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
}});

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

Updated about a month ago


Specific player configurations & debuging


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.