1. Home
  2. Video Player
  3. Customising playout appearance and behaviour

Customising playout appearance and behaviour


1.0 | Introduction

The Blue Billywig video player can be completely customised to meet your branding needs. You can change the appearance as well as its behavioural settings. To configure a playout, navigate to the ”Playouts” tab in the Online Video Platform.

Playout tab

Note:

Some settings described below might not be available in your account. Please contact our support team to gain access.

2.0 | Appearance

2.1 | Dimensions

The width and height of the playout can be fully responsive, set to an absolute value in pixels, or a percentage of its container.

Responsive sizing
A responsive playout automatically responds to a viewer’s screen size. This setting is recommended for responsive websites. To create a responsive playout, tick the ”Responsive Player sizing” box and select “use aspect ratio of the video” in the dropdown. The width of the playout is set to 100% by default, but can be set to a specific width. The height of the playout will be calculated automatically using the set width.

Relative dimensions
When you want to dynamically control the size of the player, you can use relative dimensions. We recommend the use of relative dimensions to users with basic knowledge of coding and HTML.

A player with 100% width and 100% height will completely fill its containing element. This way, a web developer can control the player dynamically by adjusting the size of its parent container. Please make sure your containing element always defines a height, as a div element without a defined height will not be visible.

 

OVP Player Appearance Size

2.2 | Color

The color of the player and its skin can be configured to match your brand and website.

  • Background opacity
    Lets you determine whether you want your progress bar to have a background color. By default this is set to 0%.
  • Highlight color
    Controls the accent color of widgets such as the progress bar and the icons in the progress bar.
  • Background color
    Controls the color of the control bar, popup windows and the title display background. The opacity of this background can be adjusted with the Background opacity slider.
  • Playout background color
    Controls the background color of the player. We advise to choose a transparent background (by clicking the ‘x’) or to match this color to your website background in order to have minimum visible disruptions when a video is loading.

OVP Player Appearance ColorOVP Player Appearance Color

Your logo can be displayed in any of the corners of the video player. Either choose a previously uploaded logo by clicking ‘select’ or click ‘upload’ to upload your logo. Choose the position by clicking the dropdown menu under alignment. Direct viewers to a webpage when clicked by adding a ‘Click URL’.

Logo

3.0 | Control Bar

You can influence the visibility of the control bar. Click the dropdown menu next to ‘Visibility’ and select one of the following:

  • Autohide (show on pause)
    This is the default setting. Autohide means that the control bar will automatically hide when a video starts playing and that the control bar will come into view when a viewer moves the mouse in view or pauses the video.
  • Always auto hide
    The control bar will only be visible when a viewer mouses over the player.
  • Show
    The control bar is always in view
  • Hide
    The control bar is never in view

Control Bar

3.1 | Time

There are several options to display the time of the video in the control bar:

  • Hide
    Time Hide
  • Show remaining time
    Time Remaining
  • Show progress time
    Time Progress
  • Show progress time and total time
    Time Progress & Total

In addition, you can choose to hide the progress bar by removing the check in the checkbox.

OVP Time

3.2 | Volume

You can customise the volume control by choosing to hide, mute only or having a vertical or horizontal slider.

Note:

The volume control/mute button is not supported on iPad and most other mobile devices.

OVP Volume

3.3 | Buttons

You can choose which options you want to display in your video by ticking the box. Some of these button will be nested within the Gear icon.

  • Subtitle select
    When subtitles or captions are available, this button will allow the user to select a different language.
  • Playback quality selector
    Allows the user to select a different playback quality.
  • Audio track selector
    When multiple audio tracks are available, this button will allow the user to select a different audio track.
  • Playback speed selector
    When speed control is available, this will allow the user to set the playback speed.
  • Fullscreen button
    Displays a button which will attempt to go fullscreen when pressed. If fullscreen is not supported by the browser it will fill up the browser space (full browser).
  • Share button
    When activating the sharing button in the control bar, the following sharing options are selected for you by default: Direct embed, Facebook, LinkedIn and Twitter. If you wish to edit sharing services & settings, you can do so in the “Sharing” tab.
  • Cast button
    Show/hide the cast button (AirPlay/ChromeCast) if supported.

OVP Buttons

4.0 | Start and End screen

In the third tab, you will find the options to customise your start and end screen.

4.1 | Start screen

The following options are available to customise the start screen:

  • Show big play button
    Tick or untick this box to to hide or show the play button.Big Play Button
  • Title
    The title of your video. Hide, show on start, or show on start & pause.
  • Author & copyright
    The author and copyright of your video. Hide, show on start, or show on start & pause.
  • Author & copyright prefix text
    Text that can be displayed as a prefix to the author & copyright. Default text is source:.
  • Disable moving thumbnail
    By default, any time a new video is uploaded to the platform, a moving thumbnail will be generated. On desktop, the thumbnail will animate when viewers hover their cursor over the video player and on mobile devices the thumbnail animates once the video is in view. The moving thumbnail skips the first two seconds of the video and then plays the following five seconds in a loop. Check this box to disable moving thumbnail and display a static thumbnail instead.

Start Screen

4.2 | End screen

The end screen is what is shown to a viewer when the video is finished.

  • Show last video frame
    By default, the thumbnail image will be shown on the endscreen. Enable this to show the last frame of the video instead
  • Show big replay button
    Gives the user the option to replay content.
  • Automatically play next clip
    You can choose to automatically play the next clip and/or show related clips by ticking the boxes. The next clip will start playing immediately after.
  • Show related items
    Select a Playlist for related items to determine the related clips that can be shown. When no playlist is selected, the player will select a related item based on relevant metadata.
  • Randomize related items
    Selecting this plays the playlist clips in a random order.
  • Use Deeplink for related items
    Select this to send the viewer to the deeplink associated with the related clip. When this option is not selected, related clips will play in the player on the current page.

5.0 | Sharing

In the Sharing tab you can control the sharing options that viewers have when watching your video.

  • Sharing options
    Select the channels where you would like viewers to be able to share a link to your video. The following options are available: Direct embed, Email, Facebook, LinkedIn, Pinterest, Twitter, and Whatsapp.
  • Use deep link for social links
    Check this box to let viewers share the deeplink specified. When no deeplink has been specified the URL that the video is being on watched on will be shared. Leave this box unchecked to let the viewer share the Blue Billywig view page with built-in Open Graph tags for Facebook embedding.
  • Share text
    This is the text that will be placed in front of the video URL. The text can be adjusted.
  • Playout used for sharing
    Select the playout you would like to be used for sharing.

OVP Player Sharing

6.0 | Behaviour

In this tab you can customise various behaviour settings of the player.

6.1 | Auto-options

  • Autoplay
    Check this box to automatically start playing the video when the player had loaded, whether or not the player is in view of the user. After checking the box two additional settings are visible:

    • Only when pre-roll ad is available
      If you are serving advertisements, you can check this box to only allow videos to automatically play when a pre-roll ad is available.  Use this setting when you want to ensure that you’re monetising your content.
    • Only if video can be played with sound
      It varies how different browsers deal with autoplay videos with sound. When a browser does not permit a video to autoplay with sound, the player will automatically mute the video and autoplay on mute. Check this box if you only want the video to autoplay when sound is permitted. Please see the box below to see how various browsers deal with autoplay.
      Browsers and autoplay

      GOOGLE CHROME
      Muted autoplay is always permitted. Autoplay with sound is only permitted if the use has interacted with the domain (such as clicking or pressing keys) or if the MEI (Media Engagement Index) limit has been reached. This limit is reached when:
      – The user has played a video with sound on the respective website within the same browser session
      – The user has added the site to the home screen of their mobile phone
      – The user has installed the PWA (Progressive Web Apps) web application on their desktop
      SAFARI
      Muted autoplay is always permitted. Autoplay with sound is only permitted if the user has interacted with the domain (such as clicking or pressing buttons).
      FIREFOX
      Muted autoplay is always permitted. Firefox has the default to block autoplay videos with sound. Autoplay with sound is only allowed if the user has interacted with the domain (such as clicking or pressing buttons).
      Microsoft IE11
      Microsoft IE11 permits autoplay as a default. Since there are no built-in settings for this, it’s difficult for users to adjust (limit or block) these settings themselves. This is where Microsoft IE11 differs from its successor Microsoft Edge.
      MICROSOFT EDGE (previously Internet Explorer)
      Microsoft Edge allows users to personalise their browser preferences on websites that use autoplay videos with sound. Users can choose whether to allow, limit, or block autoplay. In addition to this general setting, users can choose to customise settings for a specific website. Settings per website take precedence over the general settings. Unlike many other browsers, Microsoft Edge’s default setting is to allow autoplay when a user does not set any preferences for it.
      MOBILE DEVICES
      For mobile devices, such as Apple iPhones, Apple iPads, most Android and Microsoft devices, autoplay is rarely or never permitted. Therefore, assume that autoplay will not be possible on these mobile devices.

  • Auto mute
    Select this box to automatically mute your video content on autoplay. Please note that not all devices allow the influencing of volume settings.
  • Auto loop
    Select this box to automatically restart your video when it has ended, so that it will play in a loop.

OVP auto options

6.2 | In- & Out View

Here you can control different options for when the player enters or exits the view (visible to the user) through scrolling.

  • Sticky options
    Enabling this setting will keep the player in view while playing by sticking it to either the bottom or the top or floating it to one of the bottom corners. This allows users to continue watching videos when they scroll further down the page, increasing engagement and completion rates. After selecting a float option, some additional settings are visible:

    • Always float
      Checking this will make the player not appear within the content and will always float to a location of your choice on the page. We recommend using this in combination with auto play.
    • Width when floating
      The width of the player when floating in pixels. This can be a number or javascript code returning a number.
    • Minimum device width to enable floating
      This option allows you to only float the player when the device width is greater than this minimum.
    • Distance from top
      The distance from the top of the page in pixels. This can be a number or javascript code returning a number.
    • Distance from bottom
      The distance from the bottom of the page in pixels. This can be a number or javascript code returning a number.
    • In-view margin
      The percentage of the player that should be visible before triggering the ‘In View’ action.
  • In view action
    The way you want the player to act when it enters the view. You can choose none, play, unmute or play & unmute.  Selecting “Play” here means that the content will only begin to play when it’s in view of a user.
  • Out view action
    The way you want the player to act when it exits the view. You can choose none, pause, mute or pause & mute.
  • Force in view actions
    Force ‘In View’ actions on devices on which the ability to play inline is unknown (eg: iPhone). Useful for using the inArticle in an iPhone app.

In and Out View

6.3 | Keyboard

  • Disable keyboard controls
    Viewers can control the player using the keyboard. The player only responds to keyboard keys when the player is selected. This is the case when the mouse hovers over the player or when the user last clicked in the player. Check this box to disable keyboard control.
    Learn more about keyboard accessibility.

OVP Keyboard

6.4 | Mouse

  • Mouse in action
    The way you want the player to act when a viewer places the mouse over the video. You can choose none, play, unmute, or play & unmute.
  • Mouse out action
    The way you want the player to act when a viewer places the mouse out of the video. You can choose none, pause, mute, or pause & mute.
  • On click action
    The way you want the player to act when a viewer clicks on the video. You can choose between none, play or pause, open link in current window, or open link in new window.

OVP Mouse

6.5 | Placement options

These options determine where the player will be placed on the page. Read more about placing the player dynamically here.

  • Default
    Place the player directly after the position of the embed script on the page.
  • After matching DOM element
    Place the player directly after the first element matching the DOM-Selector.
  • Halfway matching DOM elements
    Place the player after the number of items matching the DOM-Selector divided by two, rounded down. Example: When 7 elements match the selector, the banner will be placed after the 3rd element.
  • After matching DOM element below the fold
    The placement logic will try to place the player below the webpage “fold”. This means it will place the player after the first element that is not completely visible without scrolling. If none of the elements is below the fold, the player will not be placed.
  • After matching DOM element below the fold, or the last element found
    Same as above, with the exception that it will be placed after the last element found, if none of the matching elements is under the fold.

OVP Placement options

7.0 | Fitmode

The fitmode is used to determine how the image (visualised as the images below) should behave relative to the player (visualised as the orange line). You can select the following fit modes:

  • Smart (recommended)
    Fitmode Smart
  • Native
    Fitmode Native
  • Fit verticalFitmode Fit Vertical
  • Fit horizontalFitmode Fit Horizontal
  • Fit bothFitmode Fit Both
  • StretchFitmode Stretch
  • Cover (overscan)
    Fitmode Cover

8.0 | Miscellaneous

8.1 | Playback preferences

The player tries to select the best asset based on the user’s bandwidth and previously selected playback quality. To do this we will do a bandwidth check before playing content. When the bandwidth is not yet determined (often the case when Auto Play is turned on) you can use the setting Prefer HD to let the player start with an asset which is at least 720p.

8.2 | Languages

  • Default subtitle
    When there are subtitles available, the player will always give priority to the language chosen by the viewer, if known and available for the clip served to the viewer. The setting you choose here will determine which language will be used when there is no preference known for the viewer.
  • Default audio track
    The player will always give priority to the language chosen by the viewer, if known and available for the clip served to the viewer. The setting you choose here will determine which language will be used when there is no preference known for the viewer.

Languages

8.3 | Developer Options

You can enable comScore logging by supplying an URL for comScore logging.

You can enable Google Analytics logging by supplying an ID for Google Analytics logging (of the form ‘UA-xxxxxxxx-x’ ). The player will then log “Init”, “Play”, “Finish”, “Replay”, and “Progress” events labeled with “<clip_id> – <clip_title>”, allowing you to identify individual clips. Furthermore, five standardised dimensions are logged: “dimension1”:<clip_id>, “dimension2”:<clip_title>, “dimension3”:<clip_length_ms>, “dimension4”:<clip_sourcetype>, “dimension5”:<clip_createddate>. In Google Analytics the data is reported under “REAL-TIME” => “Events” and “BEHAVIOR” => “Events”, in categories “Audio” and “Video”. Please contact our support team for more information on this option.

Adobe Analytics logging by the player can be enabled via three playout settings: ‘Adobe Analytics Tracking Server‘, ‘Adobe Analytics Organization ID‘ and ‘Adobe Analytics Report Suite ID‘. All three are required.

The option Disable cookies makes the player use our own advertising SDK, which does not set cookies. Furthermore, it avoids setting the ‘uuid’ cookie, disabling the tracking of unique visitors for analytics. Analytics will still work.

The option Only disable tracking cookies lets the player use Google’s advertising SDK [link?], limiting it to using non-tracking cookies. Furthermore, it avoids setting the ‘uuid’ cookie, disabling the tracking of unique visitors for analytics. Analytics will still work.

The option Enable cookies lets the player use Google’s advertising SDK, allowing it to use tracking cookies. Furthermore, it makes the player set a ‘uuid’ cookie, enabling the tracking of unique visitors for analytics. This is the setting’s default value.

IAB Consent Framework support is intended for use with an IAB-compliant Consent Management Provider (CMP), such as Faktor.io.

Attention:

A small “pitfall”: If the feature is activated in a playout, and that very playout is used for sharing to a site without CMP, then the player will behave as conservatively as possible, thus: no stats. Hence, it is advisable to set up a ‘Playout used for sharing’ without the feature.

These are the effects of withheld consent on the “standard purposes”:

  1. “Storage”: no cookies (hence no unique visitor tracking in stats), no preloading of Google IMA
  2. “Personalization”: no tracking cookies (hence no unique visitor tracking in stats)
  3. “Personalized Ads”: non-personalized ads only (via npa=1 parameter in DfP urls)
  4. “Personalized Content”: n/a
  5. “Measurement”: no stats logging (nor Blue Billywig stats nor Google Analytics, etc.)

The consent-system has priority over the playout settings (‘disableCookies’ en ‘noStats’). If no consent is found, the most conservative scenario is assumed. For that reason, the client has to intentionally activate the feature in the appropriate Playouts (setting: ‘IAB Consent Framework support’).

Updated on August 26, 2020

Was this article helpful?

Related Articles