Player Experience - Design Settings

Owned by Yahel Galili
Last updated: Mar 21, 2024
5 min read

Introduction

Configuring the look, feel, and placement of Browsi’s video player will have a significant effect on user experience and ad performance. Browsi Player offers a range of customization options, to ensure a seamless integration with your site.

Let’s walk through these customization options.

Player Designs

Default Design

Out of the box, the Player Experience screen will list 2 player designs - one for mobile and one for desktop. Each of these is set up with commonly used player settings that will often be appropriate without any tweaks.

FYI - your mobile designs are also applied to tablet users

You have the option to change the settings of these default designs, or to set any other design as the default for its device.

Tag Designs

By targeting a specific tag (or group of tags), you can tailor the player’s look and feel to specific domains, pages, UTM sources, or any other granularity tags are split for.

To set up different tag IDs to support this option, contact your Browsi Account Manager.

Customization Options

  1. Placement type - place the player within page content, as a sticky player that will float in one corner of the screen, or both.
    For best ad performance, we recommend to use both.

  2. Player mode - an outstream player will only be displayed while an ad is playing, and then hidden between these ads. An instream player will play the content set up on your Video CMS playlists between ads.

  3. Enforce aspect ratio - the player will refuse any bid with sizing that does not match a standard 16:9 or 4:3 ratio; This may harm performance by adding another filter condition for bids, but will improve user experience where advertisers frequently bid with non-standard ad sizes.

  4. In-article player settings -

    1. Fit to screen - when checked, the player will responsively take up the full width of the element it is placed in. It’s still limited by the 'max width' field, and will maintain an aspect ratio of 16:9, so it is recommended to check this.

    2. Max width - while ‘fit to screen’ is checked, this field sets the player’s maximum width. The default setting of 600px is recommended on desktop, to prevent the player’s size from stretching video content beyond its quality.
      On mobile this is not as crucial, as even a full screen width is not very big.

    3. Width and Height - when ‘fit to screen’ is unchecked, these fields determine the player’s exact dimensions in pixels. This is not a responsive option and will likely look bad on different screen sizes, so it’s recommended to check ‘fit to screen’ instead.

    4. Bottom and top margins - determine the additional height the player will put between itself and the previous and following elements on the page. The default values usually give the best result, but can be changed if there is too much or too little space above or below the player.

    5. Tag placement - when checked, the player’s placement in the page is determined by where the player tag is injected. When unchecked, a new field will let you select CSS selectors to determine the player’s placement.
      Multiple selectors can be added with comma separation, to act as fallbacks (if the player can’t find the first selector, it’s placement will be decided by the second selector; if it can’t find the second, it will look for the third etc.)
      To decide on the best way to manage your in-article player’s placement, talk to your CSM.

  5. Sticky player settings -

    1. Auto-scale - determine the width of the sticky player proportionally to the width of the in-article player. This makes the player more responsive and looks better on different screen sizes, but is only available along with in-article placement.

    2. Ratio - with ‘auto-scale’ enabled, this percent value determines the proportion of the in-article width to use as the sticky player’s width.

    3. Width - with ‘auto-scale’ disabled, this field determines the width in pixels for the sticky player.

    4. Full width - when enabled, the sticky player will include on overlay covering the width of the screen.

    5. Vertical margins - determine the distance between the top and bottom of the sticky player and the top and bottom of the screen.

    6. Side margin - determines the distance between the sides of the sticky player and the horizontal edges of the screen.

    7. Player position - determines the corner of the screen that the sticky player will align to.

    8. Above in-article placement - when enabled, the sticky player will appear while the in-article player is below the current fold. To comply with Google demand’s policies set the scroll behavior to ‘After’, so the sticky player is not displayed unless the user scrolls to the in-article player and then back up.

    9. Ad strip - when enabled, the player will indicate when it is playing an ad (as opposed to regular content.)

  6. Instream settings - manage the behavior of Browsi Player while playing accompanying content

    1. Placeholder - determines what will be displayed in the player’s in-article placement until it loads to the page.

    2. Playlist carousel - available only for desktop instream players; when enabled, the content playlist is displayed under the player, allowing users to navigate between the current videos and the previous or next ones.

    3. Carousel alignment - determines if the playlist carousel will be displayed beside the player or under it. To maximize the player’s size bottom alignment is recommended.

    4. Keep watching - when enabled, buttons will prompt the user to skip the current video or keep watching. After a set countdown, the next video will start automatically.
      Enabling this feature gives the player more chances to play pre- and post-rolls to increase fill rate, revenue and RPM.

  7. Logo settings - you can make Browsi Player your own by applying your branding to it

    1. Ads - display the selected logo while ads are playing (tip - when running a direct campaign you can increase its value by using the advertiser’s logo with this option)

    2. Content - display the selected logo while content is playing

    3. Upload logo - input the link to the image you would like the player to use as the logo

    4. Logo position - where on the player to display the selected logo (top-right/top-left)

    5. Width - stretch or limit the size of the selected image

    6. Margin - determines how far from the edge of the player to display the selected logo