Customizing Your Sato Video Player

Sato allows 50+ customizations to make your player truly look like your own.

Video Playback

Autoplay

If this is enabled, the embedded video will start playing as soon as the website it is embedded on is loaded.

Muted

If this enabled, your video will be mute by default. Website visitors can unmute from the volume controls on the player On-screen display (OSD) if they wish.

As per browser best practices, videos on autoplay will always be Muted by default unless a website visitor willingly unmutes the video from the player OSD.

Loop

When enabled, the video you add will play in repeat after playback ends

Player Styling

Padding

Inner Padding lets you set the distance between the edges of your video player and the player controls. The values can be as low as 0 and as high as you desire. The recommended values lies between 20px and 60px.

Corner Radius

Corner Radius lets you set a corner radius for your player. The values can be as low as 0 and as high as you desire. The recommended values lies between 0px and 40px.

This is what the corner radius will look like if set at 0px

OSD Bar and Top Bar Gradient

OSD & Top Bar gradient refers to the gradient overlay seen on a player. This helps the player controls remain accessible irrespective of the color of any video frame

Branding

Branding Show/Hide

When branding is on

When branding is off

By Default branding is turned on and "Sato" Logo is displayed. You can add your own brand logo by uploading your logo in the “Player branding” option available here.

To upload, just click on the “Upload” button and select the brand logo from your device.

Switching off branding will disable the visibility of the logo on the player you embed.

Branding Opacity

By Default branding opacity is 100%. You can turn it down to control its opacity

Player branding

You can change player branding by just uploading your logo. By default your logo will occupy 100% the height of the small button near it.

On-Screen Display (OSD) Styling

Primary Play Button-Show or Hide

Primary play button is the big play/pause button that appears in the center of your video player.You can either switch the primary play button on or off.

Primary Play Button - Color, Opacity, hover Color, Inner Padding & Corner Radius

Sato allows you to control every style variable of your primary play button.

1. Size : Primary Play buttons have an aspect ratio of 1:1 , you can define its width/height by entering the desired size in pixels in the Size input box
2. Color: Color refers to the default color of your primary play button. You can change it by entering a hex code or by selecting it manually from the color picker.
3. Opacity: You can control the opacity of the primary play button.
4. Hover Color: Hover color refers to color that changes to when you hover over the primary play button
5. Inner Padding: Inner padding refers to the spacing between the icon and the edges of the primary play button
6. Corner radius: You can have rounded, square or anything in between for your primary play button.

Control Icons (Mini Controls)

All control icons can be individually turned on or off.

Control icons - Color, Opacity, hover Color, Inner Padding & Corner Radius

Sato allows you to control every style variable of your control icons. They can't individually have specific styles but inherits values under the control icons list.

1. Size : Control icon buttons have an aspect ratio of 1:1 , you can define its width/height by entering the desired size in pixels in the Size input box
2. Color: Color refers to the default color of your control icon buttons. You can change it by entering a hex code or by selecting it manually from the color picker.
3. Opacity: You can control the opacity of the control icon buttons.
4. Hover Color: Hover color refers to color that changes to when you hover over the control icon buttons
5. Inner Padding: Inner padding refers to the spacing between the icon and the edges of the control icon buttons
6. Corner radius: You can have rounded, square or anything in between for your control icon buttons.

Playback Progress

Playback Progress Bar & Timeline

1. Playback Progress bar can be switched on or off.
2. Timestamp can be switched on or off
3. Spacing from bottom defines how far the progress bar is from the button bar in the bottom
4. Height refers to the height of the Playback Progress Bar
5. Scale on Hover refers to scale when mouse pointer is on the bar. In Sato this accepts increments of 1, 1.5, 2 etc.
6. Progress Bar Opacity: Can be as transparent or opaque as you wish.
7. Foreground color: Refers to the color of the section of the timeline that has already played.
8. Background color: Refers to the backround color of the Playback progress bar.
9. Loaded color: Color of the section that has video loaded.
10. Circle Color : Circle is the small circle that shows the current point in the video timeline
11. Tootip BG Color: Tootip shows the timestamp on hover on the playback progress bar. You can change the bg color of the tooltip
12. Tootip Text Color: You can change the tooltip text color.
13. Tooltip Opacity: You can change the opacity of your tooltip
14. Tooltip corner radius: You can change the corner radius of the tooltip.

Volume Bar

Volume bar refers to the volume control beside the sound button.

1. You can control its size. (height: just like the video progress bar)
2. Volume Bar BG color : The background color of the volume bar.
3. Volume Bar FG color : The foreground color of the volume bar.
4. Opacity: This controls the opacity of the volume bar.

Settings Menu

This is where you can control how the settings menu looks within your video player

1. Background Color: You can control the background color of the menu
2. Settings Menu Opacity: You can control the opacity of the menu
3. Hover Color: You can set a color to your menu that it can change into when your visitors hover over it
4. Text Color: You can set a color to the text that appears on the settings menu

Metadata & Thumbnail

Metadata & Thumbnail allows you to control the video’s visibility.

Video title that visually appears on the top can be switched on or off. In addition you can also change text color.

Metadata is not visible on the player but is vital for discoverablity on the web.

You can upload a thumbnail for your video and switch it on or off from here.

‍