Customize the Uplynk Player

Customization

General Player Customization

The parameters in this section are passed in the UplynkPlayer.embed function call. You can use either single-quotes or double-quotes when setting parameters. Double-quotes are shown below.

height: pixels (e.g. "500px" or "500") or "auto"

📘

Auto height only supported for AudioPlaylistPlayer as the playerForm

width: pixels (e.g. "500px" or "500"), percentage (e.g. "50%"), or "auto"

📘

For non-playlists, auto height/width requires one dimension to be defined

enableCookies: "true" or "false"(false recommended)

autoTitle:

• "none": Standard behavior, disables auto title
• "playlist": Automatically uses the playlist title
• "item": Automatically uses the current video's title

title: Sets the player title to a string (e.g. "My Player")

📘

autoTitle and title are not supported for Standard as the playerForm

showPlaylist: "true" or "false" for a playlist player

playlistOrientation: "left", "right", "top", or "bottom"

Skin Controls for Customization

The Uplynk Player has additional "skin" controls that allow you to customize its appearance, including fonts, colors, and thumbnail visibility. Fonts and colors are specified using CSS values.

You can use either single-quotes or double-quotes when setting parameters. Double-quotes are shown below.

CSS fonts are found at https://www.w3schools.com/css/css_font.asp.

CSS colors are found at https://www.w3schools.com/cssref/css_colors_legal.php.

The following example shows how to specify skin controls:

<div id="audio_only_playlist_player"></div>
<script charset="UTF-8" src="https://ovp-static.uplynk.net/player.min.js"></script>
<script> 
UplynkPlayer.embed({
  "playerId": "audio_only_playlist_player",
  "channelId": "bfc1f4d5ae9a4af9b8bc5754e98b3b3a",
  "showPlaylist": true,
  "enableCookies": false,
  "playerForm": "AudioPlaylistPlayer",
  "skin": { 
            "itemBackground": "purple",
            "activeItemBackground": "red",
            "playlistTitleColor": "white",
            "playlistDescriptionColor": "white",
            "playlistDurationColor": "white",
            "playlistThumbnailVisible": false,
            "playlistDescriptionVisible": false,
            "playlistDurationVisible": true,
            "scrollbarTrackColor": "blue",
            "scrollbarThumbColor": "yellow" 
          }
});
</script>

The following subsections list all available skin controls for the Uplynk Player.

Video Player Config Options

• itemFont (CSS font, e.g. "itemFont": "18px Courier New")
• headerFont (CSS font, e.g. "headerFont": "18px Courier New")
• titleFont (CSS font, e.g. "titleFont": "18px Courier New")

Colors (Set to CSS Color)

• headerBackground
• itemBackground
• activeItemBackground
• controlBackground
• controlColor
• bigPlayColor
• playerTitleFont
• playerTitleColor
• playerTitleBackground
• playlistColor
• playlistBackground
• playlistTitleColor
• playlistDescriptionColor
• playlistDurationColor
• scrollbarTrackColor
• scrollbarThumbColor

Visibility (Set to true/false)

• playlistThumbnailVisible
• playlistDescriptionVisible
• playlistDurationVisible
• videoVisible