1.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.
1.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.
1.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’.