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.
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.
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.
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.
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.
2.3 | Logo
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’.
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.
The control bar is always in view
The control bar is never in view
3.1 | Time
There are several options to display the time of the video in the control bar:
- Show remaining time
- Show progress time
- Show progress time and total time
In addition, you can choose to hide the progress bar by removing the check in the checkbox.
3.2 | Volume
You can customise the volume control by choosing to hide, mute only or having a vertical or horizontal slider.
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.
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.
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.
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.
6.0 | Behaviour
In this tab you can customise various behaviour settings of the player.
6.1 | Auto-options
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
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
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).
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 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.
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.
- Only when pre-roll ad is available
- 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.
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
- 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
- Distance from bottom
- In-view margin
The percentage of the player that should be visible before triggering the ‘In View’ action.
- Always float
- 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.
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.
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.
6.5 | Placement options
These options determine where the player will be placed on the page. Read more about placing the player dynamically here.
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.
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)
- Fit vertical
- Fit horizontal
- Fit both
- Cover (overscan)
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.
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 Tracking Server can be requested from your Adobe account manager. It should have the form ‘<visitor_namespace>.hb.omtrdc.net’.
- The Organization ID can be found by signing in to Omniture ( https://sc3.omniture.com/login/ ) and navigating to Admin => User Management. It should have the form ‘xxxxxxxxxxxxxxxxxxxxxxxx@AdobeOrg‘. (see: https://marketing.adobe.com/resources/help/en_US/mcloud/admin_getting_st… ). You do not have to setup the Marketing Cloud ID service; our player implements it for you.
- The Report Suite ID can be found by signing in to Omniture ( https://sc3.omniture.com/login/ ) and navigating to Admin => Report Suites. You may have to create a report suite first.
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.
These are the effects of withheld consent on the “standard purposes”:
- “Storage”: no cookies (hence no unique visitor tracking in stats), no preloading of Google IMA
- “Personalization”: no tracking cookies (hence no unique visitor tracking in stats)
- “Personalized Ads”: non-personalized ads only (via npa=1 parameter in DfP urls)
- “Personalized Content”: n/a
- “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’).