Custom skin

Guide to creating a custom skin for the Brid player

This guide will explain how to create a custom skin for a Brid player. It contains a detailed description of the process of editing, and example code that is meant to be used as a reference.

Every Brid player skin is defined using two main files:

  • A CSS file which contains all styling
  • An SVG JSON object which contains all necessary icons the player uses

Creating a custom CSS file for styling purposes

First create a new empty CSS file and name it using this convention {SKIN_NAME}.css. For example, newskin.css.

Here's a list of all CSS classes that you have at your disposal for styling and creating a new skin:

Player controls CSS classes reference

Class nameDescription
.brid-{SKIN_NAME}-mainThis is the main parent CSS class which all other classes will inherit settings from. Use this to set some globals like font types etc.
.brid-controlsUsed for styling the player controls bar.
.brid-controlUsed to define a default style that will be applied to the players control buttons (play/pause, previous, next, hd toggle button etc.)
.brid-control > svgDefault styling for the SVG tag element of buttons. Commonly used to define the width and height of an SVG element.
.brid-play-controlContainer for the "Play" button.
.brid-play-control > svgStyling the width and height for the SVG element of the "Play/Pause" and “Repeat” buttons (Associated SVG element “PlayToggle”, “Pause” and “Repeat”).
.brid-previous-controlContainer for the "Previous" button (shown only in Playlist mode).
.brid-previous control > svgStyling the width and height for the SVG element of the "Previous" button (Associated SVG element “Previous”).
.brid-next-buttonContainer for the "Next" button (shown only in Playlist mode).
.brid-next-button > svgStyling the width and height for the SVG element of the"Next" button (Associated SVG element “Next”).
.brid-mute-controlContainer for the "Mute" button.
.brid-mute-control > svgStyling the width and height for the SVG element of the "Mute" button (Associated SVG element “MuteToggle” and “Muted).
.brid-volume-controlParent class used for positioning of volume controls.
.brid-volume-barWraps the volume bars (both active - the ones that contribute to the volume level and inactive - the ones that don’t).
.bar-bracketClass that is used to style a single volume bar that is not active.
.brid-volume-levelClass that wraps all of the .level-bracket elements.
.level-bracketClass that is used to style a single volume bar that is active.
.brid-time-controlsUsed to style font and position properties of the time display.
.brid-current-timeUsed to style the current time display.
.brid-durationUsed to style the total time display.
.brid-time-dividerUsed to style the time divider element “/” between the current and total time display.
.brid-fullscreen-controlContainer for the fullscreen button.
.brid-fullscreen-control > svgStyling the width and height for the SVG element of the "Fullscreen" button (Associated SVG element “FullscreenToggle” and “FullscreenOff”).
.brid-hd-controlContainer for the HD button toggle.
.brid-hd-control > svgStyling the width and height for the SVG element of the "HD" button (Associated SVG element “HDToggleOn” and “HDToggleOff”).
.brid-share-control > svgStyling the width and height for the SVG element of the "Share" button (Associated SVG element “OpenShare”).
.brid-playlist-control > svgStyling the width and height for the SVG element of the "Playlist" button (Associated SVG element “OpenPlaylist”).
.brid-captions-control > svgStyling the width an height of the SVG element of the “Captions” button (Associated SVG element “captions”).
.brid-thumb-holderStyling the thumbnail image that shows when the playlist button is pressed (Note: Many of the styles are loaded inline, CSS file in this example will just modify the border line).
.brid-titleStyling the title of the video in the Thumb Holder (Note: Many of the styles are loaded inline, CSS file in this example will just modify the font size).
.brid-captionsStyling for the caption text.
.brid-subtitlesStyling for the subtitle text .

!!! In the table above you will note a {SKIN_NAME} placeholder. This is a string which will uniquely identify your skin. This string will be used throughout your CSS skin file and also will be references in a couple of more places which we will note in this guide so make sure to pay attention to this name.

Player poster image CSS classes reference

Class nameDescription
.brid-poster-titleClass assigned to a far-top container which holds the name of the video.
.brid-poster-title > divStyle the text that will be inserted in the .brid-poster-title > div.

Player progress bar CSS classes reference

Class nameDescription
.brid-progress-controlParent container for the progress controls styled with size and position.
.brid-progress-holderChild container for the progress controls. Styles the whole progress bar, but mainly used to define the thickness of the progress bar and the color of the unbuffered part of the progress bar.
.brid-play-progressStyling for the timeline of the progress bar that has been played back.
.brid-load-progressStyling for the timeline of the progress bar that has been buffered.

Here's an example of a custom made CSS skin file made by the Brid Team used for one of our official skins - skin file
!!! Note that in the above CSS file {SKIN_NAME} is veepstm.

Using your newly created skin CSS file with a Brid player

Now that you have created your custom CSS file, you need to somehow load it into a player to see how it looks and feels.
As we have already named our skin file to newskin.css, make sure to substitute {SKIN_NAME} wherever needed in your custom CSS with the appropriate name.

Using your new skin with a player example:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid" style="width:640; height:360;"></div>
<script>
$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID", "Style":{"name":"{PATH_TO_YOUR_SKIN}/newskin.css", "skinClass":"brid-newskin-main"}}); 
<script>

Creating custom SVG media elements for the player

The Brid player uses the standard SVG format for all it's elements so any SVG you create should work just fine.

Here's a list of all SVG elements the player uses that you can configure to your liking:

NameDescriptionExample
PlayTogglePlay control button24.3 27.2'><path fill='#000' transform='scale(1.06) translate(0 0.1)' opacity='0.3' d='M0.2,27.2V0.2l24.1,13.7L0.2,27.2z'/><path fill='#fff' d='M0.2,27.2V0.2l24.1,13.7L0.2,27.2z'/>
PausePause control button20.4 20'><g fill='#000' transform='scale(1.06) translate(0 0.1)' opacity='0.3'><rect x='3.8' y='3.1' width='3.9' height='13.2'/><rect x='12' y='3.1' width='3.9' height='13.2'/></g><g><rect x='3.8' y='3.1' fill='#FFFFFF' width='3.9' height='13.2'/><rect x='12' y='3.1' fill='#FFFFFF' width='3.9' height='13.2'/></g>
FullscreenToggleFullscreen button when the player is not in Fullscreen mode18.5 12.2'><g fill='#000' transform='scale(1.06) translate(0 0.1)' opacity='0.3'><path d='M0,0h18.5v12.2H0V0z M17.1,1.4H1.4v9.3h15.6V1.4z'/><rect x='9.2' y='3.7' width='5.4' height='3.5'/></g><g><path fill='#FFFFFF' d='M0,0h18.5v12.2H0V0z M17.1,1.4H1.4v9.3h15.6V1.4z'/><rect x='9.2' y='3.7' fill='#FFFFFF' width='5.4' height='3.5'/></g>
FullscreenOffFullccreen button when the player is in Fullscreen mode18.483 12.199'><g fill='#000' transform='scale(1.06) translate(0 0.1)' opacity='0.3'><path d='M18.4,12.1H0V0h18.4V12.1z M1.4,10.7h15.6V1.4H1.4V10.7z'/><rect x='3.8' y='4.9' width='5.4' height='3.5'/></g><g><path fill='#FFFFFF' d='M18.4,12.1H0V0h18.4V12.1z M1.4,10.7h15.6V1.4H1.4V10.7z'/><rect x='3.8' y='4.9' fill='#FFFFFF' width='5.4' height='3.5'/></g>
PlayButtonOverlayPlay icon that is overlayed when video is loaded60 59.8'><path fill='#000' transform='scale(1.03) translate(0 0.2)' opacity='0.3' d='M5.5,58.8V1l51.7,29L5.5,58.8z'></path><path fill='#FFFFFF' d='M5.5,58.8V1l51.7,29L5.5,58.8z'></path>
MuteToggleSpeaker icon16 16'><g fill='#000' transform='scale(1.03) translate(0 0.2)' opacity='0.3'><polygon points='10,16 10,0 3,5 0.2,5 0.2,11 3,11 '/><path d='M11,13.91c2.837-0.477,5-2.938,5-5.91s-2.163-5.433-5-5.91v1.011C13.279,3.566,15,5.585,15,8s-1.721,4.434-4,4.899V13.91z'/><path d='M11,9.722v1.094c1.163-0.413,2-1.512,2-2.816s-0.837-2.403-2-2.816v1.094C11.595,6.625,12,7.263,12,8 C12,8.737,11.595,9.375,11,9.722z'/></g><g fill='#fff'><polygon points='10,16 10,0 3,5 0.2,5 0.2,11 3,11 '/><path d='M11,13.91c2.837-0.477,5-2.938,5-5.91s-2.163-5.433-5-5.91v1.011C13.279,3.566,15,5.585,15,8s-1.721,4.434-4,4.899V13.91z'/><path d='M11,9.722v1.094c1.163-0.413,2-1.512,2-2.816s-0.837-2.403-2-2.816v1.094C11.595,6.625,12,7.263,12,8 C12,8.737,11.595,9.375,11,9.722z'/></g>
MutedMute icon when the sound is muted16 16'><g fill='#000' transform='scale(1.03) translate(0 0.2)' opacity='0.3'><polygon points='10,16 10,0 3,5 0.2,5 0.2,11 3,11 '/><polygon points='14.646,5.646 13,7.293 11.354,5.646 10.646,6.354 12.293,8 10.646,9.646 11.354,10.354 13,8.707 14.646,10.354 15.354,9.646 13.707,8 15.354,6.354 '/></g><g fill='#fff'><polygon points='10,16 10,0 3,5 0.2,5 0.2,11 3,11 '/><polygon points='14.646,5.646 13,7.293 11.354,5.646 10.646,6.354 12.293,8 10.646,9.646 11.354,10.354 13,8.707 14.646,10.354 15.354,9.646 13.707,8 15.354,6.354 '/></g>
OpenShareShare icon24 24'><path fill='#fff' d='M12.74,13.06 v4.9 l9.8,-7.3 l-9.8,-7.4 v4.6 c-11.8,0 -12.2,12.5 -12.2,12.5 C3.94,14.96 6.34,13.06 12.74,13.06 z' />
OpenPlaylistOpen Playlist icon240 240'><g><rect x='38.2' y='29.1' fill='#FFFFFF' width='163.6' height='9.1'/><rect x='29.1' y='47.3' fill='#FFFFFF' width='181.8' height='9.1'/><path fill='#FFFFFF' d='M218.7,65.5H21.3c-0.7,0-1.3,0.5-1.3,1.2v143.1c0,0.6,0.6,1.2,1.3,1.2h197.4c0.7,0,1.3-0.5,1.3-1.2V66.6C220,66,219.4,65.5,218.7,65.5z M92.7,165.5v-54.5l63.6,27.3L92.7,165.5z'/></g>
ThumbnailOverlayPlay icon that is displayed over the thumbnail image in a playlist30 30'><path opacity='0.8' enable-background='new' d='M5.4,25V6.3l19.8,9.3L5.4,25z M7.8,10.1v11.1l11.7-5.5L7.8,10.1z'/><path fill='#FFFFFF' d='M4.8,23.7V5l19.8,9.3L4.8,23.7z M7.2,8.8v11.1L19,14.4'/>
CaptionsCaptions icon19 10.6'><g><g><g><path fill='#FFFFFF' d='M5.3,0C6.8,0,8,0.5,9,1.5h0c0.1,0.1,0.2,0.2,0.2,0.3c0,0.1,0.1,0.2,0.1,0.3c0,0.3-0.1,0.6-0.3,0.8 C8.8,3.1,8.7,3.1,8.6,3.2c-0.1,0-0.3,0.1-0.4,0.1c-0.3,0-0.6-0.1-0.8-0.3C6.8,2.4,6.1,2.1,5.3,2.1c-0.4,0-0.8,0.1-1.2,0.3 c-0.4,0.2-0.7,0.4-1,0.7c-0.3,0.3-0.5,0.6-0.7,1C2.2,4.5,2.1,4.9,2.1,5.3c0,0.4,0.1,0.8,0.3,1.2c0.2,0.4,0.4,0.7,0.7,1 c0.3,0.3,0.6,0.5,1,0.7c0.4,0.2,0.8,0.2,1.2,0.2c0.8,0,1.5-0.3,2.2-0.9c0.1-0.1,0.4-0.2,0.7-0.2c0.3,0,0.5,0.1,0.7,0.4 c0.2,0.2,0.3,0.5,0.3,0.7c0,0.1,0,0.2-0.1,0.4C9.2,8.9,9.1,9,9,9c-0.5,0.5-1.1,0.9-1.7,1.1c-0.6,0.3-1.3,0.4-2,0.4 c-0.7,0-1.4-0.1-2.1-0.4C2.6,9.9,2.1,9.5,1.6,9C1.1,8.5,0.7,8,0.4,7.3C0.1,6.7,0,6,0,5.3c0-0.7,0.1-1.4,0.4-2 c0.3-0.6,0.7-1.2,1.2-1.7c0.5-0.5,1.1-0.9,1.7-1.2C3.9,0.1,4.6,0,5.3,0z'/><path fill='#FFFFFF' d='M15.1,0c1.5,0,2.7,0.5,3.7,1.5h0C18.9,1.6,19,1.7,19,1.8C19,2,19,2.1,19,2.2c0,0.3-0.1,0.6-0.3,0.8 c-0.1,0.1-0.2,0.2-0.4,0.2c-0.1,0-0.3,0.1-0.4,0.1c-0.3,0-0.6-0.1-0.8-0.3c-0.6-0.5-1.3-0.8-2.1-0.8c-0.4,0-0.8,0.1-1.2,0.3 c-0.4,0.2-0.7,0.4-1,0.7c-0.3,0.3-0.5,0.6-0.7,1c-0.2,0.4-0.3,0.8-0.3,1.2c0,0.4,0.1,0.8,0.3,1.2c0.2,0.4,0.4,0.7,0.7,1 c0.3,0.3,0.6,0.5,1,0.7c0.4,0.2,0.8,0.2,1.2,0.2c0.8,0,1.5-0.3,2.2-0.9c0.1-0.1,0.4-0.2,0.7-0.2c0.3,0,0.5,0.1,0.7,0.4 C18.9,7.9,19,8.1,19,8.4c0,0.1,0,0.2-0.1,0.4c0,0.1-0.1,0.2-0.2,0.3c-0.5,0.5-1.1,0.9-1.7,1.1s-1.3,0.4-2,0.4 c-0.7,0-1.4-0.1-2.1-0.4c-0.6-0.3-1.2-0.7-1.7-1.1c-0.5-0.5-0.9-1-1.1-1.7C9.9,6.7,9.8,6,9.8,5.3c0-0.7,0.1-1.4,0.4-2 c0.3-0.6,0.7-1.2,1.2-1.7c0.5-0.5,1.1-0.9,1.7-1.2C13.7,0.1,14.4,0,15.1,0z'/></g></g></g>
PauseButtonOverlayPause icon that is overlayed when video is paused (Mobile only)60 59.8'><g fill='#000' transform='scale(1.03) translate(0 0.1)' opacity='0.3'><rect x='16.0' y='14.1' width='10.1' height='33.7'/><rect x='34.1' y='14.1' width='10.1' height='33.7'/></g><g><rect x='16.0' y='14.1' fill='#FFFFFF' width='10.1' height='33.7'/><rect x='34.1' y='14.1' fill='#FFFFFF' width='10.1' height='33.7'/></g>
NextNext video icon, when in playlist mode24 24'><g fill='#000' transform='scale(1.06) translate(0 0.1)' opacity='0.3'><polygon points='5.6,4.3 16.7,12 5.6,19.7'/><rect x='16.7' y='4.3' width='1.8' height='15.3'/></g><g fill='#FFFFFF'><polygon points='5.6,4.3 16.7,12 5.6,19.7'/><rect x='16.7' y='4.3' width='1.8' height='15.3'/></g>
PreviousPrevious video icon, when in playlist mode24 24'><g fill='#000' transform='scale(1.06) translate(0 0.1)' opacity='0.3'><polygon points='18.4,4.3 7.3,12 18.4,19.7'/><rect x='5.6' y='4.3' width='1.8' height='15.3'/></g><g fill='#FFFFFF'><polygon points='18.4,4.3 7.3,12 18.4,19.7'/><rect x='5.6' y='4.3' width='1.8' height='15.3'/></g>
RepeatRepeat icon, shown when video has ended20.4 20'><path transform='scale(1.05)' fill='#000' opacity='0.3' d='M15.7,10.1c0,0.1,0,0.2,0,0.4c0,3.1-2.5,5.5-5.5,5.5s-5.5-2.5-5.5-5.5C4.7,7.4,7.2,5,10.2,5v1.7l4.4-3.1 l-4.4-3v1.7c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8s8-3.6,8-8c0.1-0.1,0.1-0.2,0.1-0.4L15.7,10.1z'\/><path fill='#FFFFFF' d='M15.7,10.1c0,0.1,0,0.2,0,0.4c0,3.1-2.5,5.5-5.5,5.5s-5.5-2.5-5.5-5.5C4.7,7.4,7.2,5,10.2,5v1.7l4.4-3.1 l-4.4-3v1.7c-4.4,0-8,3.6-8,8c0,4.4,3.6,8,8,8s8-3.6,8-8c0.1-0.1,0.1-0.2,0.1-0.4L15.7,10.1z'\/>
HDToggleOnHD icon when HD mode is turned on22.1 11.4'><g fill='#fff'><polygon points='6.5,4 2.9,4 2.9,0 0,0 0,11.4 2.9,11.4 2.9,6.8 6.5,6.8 6.5,11.4 9.4,11.4 9.4,0 6.5,0'/><path d='M21.9,3.6c-0.1-0.7-0.4-1.3-0.7-1.8c-0.4-0.5-0.8-1-1.4-1.3C19.1,0.2,18.4,0,17.5,0h-5.4v11.4h5.4 c0.9,0,1.6-0.2,2.2-0.5c0.6-0.3,1.1-0.8,1.4-1.4c0.3-0.5,0.6-1.2,0.7-1.9C22,7,22.1,6.3,22.1,5.6C22.1,4.9,22,4.2,21.9,3.6z M15,2.8h2c0.5,0,0.8,0.1,1.1,0.2c0.3,0.1,0.4,0.3,0.6,0.5C18.8,3.7,18.9,4,19,4.4c0.1,0.4,0.1,0.8,0.1,1.2c0,0.4,0,0.9-0.1,1.3 c0,0.4-0.1,0.7-0.3,1c-0.1,0.2-0.3,0.4-0.6,0.6c-0.3,0.2-0.6,0.2-1.1,0.2h-2V2.8z'/></g>
HDToggleOffHD icon when HD mode is turned off22.1 11.4'><g opacity='0.45'><polygon fill='#FFFFFF' points='6.5,4 2.9,4 2.9,0 0,0 0,11.4 2.9,11.4 2.9,6.8 6.5,6.8 6.5,11.4 9.4,11.4 9.4,0 6.5,0'/><path fill='#FFFFFF' d='M21.9,3.6c-0.1-0.7-0.4-1.3-0.7-1.8c-0.4-0.5-0.8-1-1.4-1.3C19.1,0.2,18.4,0,17.5,0h-5.4v11.4h5.4 c0.9,0,1.6-0.2,2.2-0.5c0.6-0.3,1.1-0.8,1.4-1.4c0.3-0.5,0.6-1.2,0.7-1.9C22,7,22.1,6.3,22.1,5.6C22.1,4.9,22,4.2,21.9,3.6z M15,2.8h2c0.5,0,0.8,0.1,1.1,0.2c0.3,0.1,0.4,0.3,0.6,0.5C18.8,3.7,18.9,4,19,4.4c0.1,0.4,0.1,0.8,0.1,1.2c0,0.4,0,0.9-0.1,1.3 c0,0.4-0.1,0.7-0.3,1c-0.1,0.2-0.3,0.4-0.6,0.6c-0.3,0.2-0.6,0.2-1.1,0.2h-2V2.8z'/></g>
BrandBranding icon16.9 16.5'><path fill='#ff0000' d='M13.5,0H3.3C1.5,0,0,1.5,0,3.3v9.9c0,1.8,1.5,3.3,3.3,3.3h10.3c1.8,0,3.3-1.5,3.3-3.3V3.3 C16.8,1.5,15.3,0,13.5,0z'\/><path class='brand-bg' fill='#999' d='M13.5,0H3.3C1.5,0,0,1.5,0,3.3v9.9c0,1.8,1.5,3.3,3.3,3.3h10.3c1.8,0,3.3-1.5,3.3-3.3V3.3 C16.8,1.5,15.3,0,13.5,0z'\/><g><path fill='#FFF' d='M2.2,6.3c0.2,0,0.4-0.1,1-0.2C3.8,5.9,4,5.9,4.6,5.8c-0.1,0.4-0.1,1-0.1,1.6C4.4,8.2,4.4,9,4.4,9.1 c0,0.2,0,1,0,1.2c0,0.7,0,1,0.1,1.3c0.1,0.2,0.2,0.3,0.2,0.5c0.1,0.2,0.3,0.2,0.5,0.2c0.2-0.1,0.4-0.3,0.4-0.5v-0.1 c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1,0-0.2c0-0.3,0-0.6,0-0.8c0,0,0-0.3,0-0.6c0-0.2,0-0.5,0-1c0-0.2,0-0.4,0-1.1c0-0.5,0-1.3,0.1-1.9 c0,0,0,0,0.1,0c0.1,0,0.4-0.1,0.8-0.1c0.5-0.1,1.3-0.1,1.6-0.2c0.1,0,0.3-0.1,0.3-0.1V5.3c0,0,0-0.1,0-0.3c0-0.1,0-0.1,0-0.1V4.8 c0.1,0,0-0.1,0-0.1c-0.1,0-0.1-0.1-0.1-0.1L8.3,4.5c-0.1,0,0,0-0.1,0c-0.1,0-0.2,0-0.2,0s0,0-0.1,0C7.6,4.6,6.3,4.8,5.5,4.9 C4.5,5.1,3,5.4,2.1,5.6c-0.2,0-0.2,0.2-0.2,0c0,0.1,0,0.2,0,0.2c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0.1,0.2C2,6.2,2.1,6.3,2.2,6.3z'\/><path fill='#FFF' d='M9.9,10.8c0.2,0.5,0.7,1.3,1.2,1.3c0.6,0,0.8-0.9,1.1-1.6C12.6,9.6,12.8,9,13,8.4c0.2-0.6,1-2.6,1.1-2.8 c0.1,0,0.2-0.3,0.3-0.3c0.1-0.1,0.2-0.3,0-0.4c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.3-0.2-0.4-0.2c-0.1,0-0.3,0.1-0.5,0.2 C13.1,4.6,13,4.7,13,4.8c0,0.1-0.1,0.3-0.1,0.4c0,0-0.1,0.6-0.3,1.2C12.4,7,12.2,7.5,12,8c-0.2,0.4-0.5,1.3-0.8,1.9 c-0.2,0.4-0.3,0.6-0.4,0.6c-0.1,0-0.3-0.7-0.4-1.3c-0.1-0.7-0.3-1.5-0.3-2c0-0.4-0.1-1.4-0.1-1.7S9.8,5,9.7,4.9 c-0.1,0-0.3-0.1-0.4-0.1c-0.2,0-0.4,0.4-0.4,0.7c0,0.2,0,0.3,0,0.4c0,0,0,0.1,0,0.2C9,6.7,9.2,7.8,9.3,8.6 C9.5,9.4,9.7,10.3,9.9,10.8z'\/><\/g>

The SVG files shown above are not complete.
For example, the PlayToggle icon defined above has the following content - 24.3 27.2'><path fill='#000' transform='scale(1.06) translate(0 0.1)' opacity='0.3' d='M0.2,27.2V0.2l24.1,13.7L0.2,27.2z'/><path fill='#fff' d='M0.2,27.2V0.2l24.1,13.7L0.2,27.2z'/> .

The whole SVG file should look like this in fact - <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24.3 27.2'><path fill='#000' transform='scale(1.06) translate(0 0.1)' opacity='0.3' d='M0.2,27.2V0.2l24.1,13.7L0.2,27.2z'/><path fill='#fff' d='M0.2,27.2V0.2l24.1,13.7L0.2,27.2z'/></svg>

But first part of the code is inserted by Brid automatically so don't be worried about inserting incomplete SVG notations.

A complete example code with fully implemented custom skin using both a custom CSS file and custom SVG icons:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
   </head>
    <body>
 
<script type="text/javascript" src="//<<services_domain>>/player/build/<<player_script>>"></script> <div id="myDiv" class="brid" style="width:640;height:360;"> </div> 
 <script type="text/javascript">
 
// Play Button in the controls panel
var playControl = "20.8 22.1'><polygon fill='#FFFFFF' points='1.8,21.6 0,18.4 13.2,10.9 0,3.7 1.8,0.5 20.8,10.8'/>";
 
// Pause button in the controls panel, that shows up when video is playing
var pause = "20.8 22.1'><g><rect x='3.3' y='1.7' fill='#FFFFFF' width='3.7' height='18.8'/><rect x='13.8' y='1.7' fill='#FFFFFF' width='3.7' height='18.8'/></g>";
 
// Fullscreen button in the controls panel, when video is not in HD mode
var fullscreenToogle = "20.1 14.8'><g><polyline fill='none' stroke='#FFFFFF' stroke-width='3.7076' stroke-miterlimit='10' points='8.3,3 17.1,3 17.1,11.8'/><polyline fill='none' stroke='#EC008C' stroke-width='3.7076' stroke-miterlimit='10' points='11.8,11.8 3,11.8 3,3'/></g>";
 
// Fullscreen button in the controls panel, when video is not in HD mode
var fullscreenOff = "20.1 14.8'><g><polyline fill='none' stroke='#FFFFFF' stroke-width='3.7076' stroke-miterlimit='10' points='11.8,11.8 3,11.8 3,3'/><polyline fill='none' stroke='#EC008C' stroke-width='3.7076' stroke-miterlimit='10' points='8.3,3 17.1,3 17.1,11.8'/></g>";
 
// Play icon that is overlayed on top of the video, when the video is loaded
var playButtonOverlay = "60 59.8'><g><path opacity='0.3' d='M30,0.6C13.8,0.6,0.7,13.7,0.7,29.9c0,16.2,13.1,29.3,29.3,29.3c16.2,0,29.3-13.1,29.3-29.3 C59.3,13.7,46.2,0.6,30,0.6z'/><polyline fill='none' stroke='#EC008C' stroke-width='4.7866' stroke-miterlimit='10' points='20.6,18.5 41.4,29.7 20.6,41.6'/></g>";
 
// Speaker icon in the controls panel
var muteToggle = "16 16'><g fill='#000' transform='scale(1.03) translate(0 0.2)' opacity='0.3'><polygon points='10,16 10,0 3,5 0.2,5 0.2,11 3,11 '/><path d='M11,13.91c2.837-0.477,5-2.938,5-5.91s-2.163-5.433-5-5.91v1.011C13.279,3.566,15,5.585,15,8s-1.721,4.434-4,4.899V13.91z'/><path d='M11,9.722v1.094c1.163-0.413,2-1.512,2-2.816s-0.837-2.403-2-2.816v1.094C11.595,6.625,12,7.263,12,8  C12,8.737,11.595,9.375,11,9.722z'/></g><g fill='#fff'><polygon points='10,16 10,0 3,5 0.2,5 0.2,11 3,11 '/><path d='M11,13.91c2.837-0.477,5-2.938,5-5.91s-2.163-5.433-5-5.91v1.011C13.279,3.566,15,5.585,15,8s-1.721,4.434-4,4.899V13.91z'/><path d='M11,9.722v1.094c1.163-0.413,2-1.512,2-2.816s-0.837-2.403-2-2.816v1.094C11.595,6.625,12,7.263,12,8  C12,8.737,11.595,9.375,11,9.722z'/></g>";
 
// Muted icon in the controls panel
var muted = "16 16'><g fill='#000' transform='scale(1.03) translate(0 0.2)' opacity='0.3'><polygon points='10,16 10,0 3,5 0.2,5 0.2,11 3,11 '/><polygon points='14.646,5.646 13,7.293 11.354,5.646 10.646,6.354 12.293,8 10.646,9.646 11.354,10.354 13,8.707 14.646,10.354 15.354,9.646 13.707,8 15.354,6.354 '/></g><g fill='#fff'><polygon points='10,16 10,0 3,5 0.2,5 0.2,11 3,11 '/><polygon points='14.646,5.646 13,7.293 11.354,5.646 10.646,6.354 12.293,8 10.646,9.646 11.354,10.354 13,8.707 14.646,10.354 15.354,9.646 13.707,8 15.354,6.354 '/></g>";
 
// Share button in the controls button
var share = "40 40'><g><path opacity='0.1' fill='#231F20' d='M27.8,35.7c-3.2,0-5.8-2.6-5.9-5.7l-7.3-4.5C13.8,25.8,13,26,12.1,26c-3.3,0-5.9-2.7-5.9-6 c0-3.3,2.7-6,5.9-6c0.9,0,1.7,0.2,2.4,0.5l7.3-4.5c0.1-3.2,2.7-5.7,5.9-5.7c3.3,0,6,2.7,6,5.9c0,3.3-2.7,5.9-6,5.9 c-0.9,0-1.7-0.2-2.4-0.5l-7,4.3l7,4.3c0.8-0.4,1.6-0.5,2.4-0.5c3.3,0,6,2.7,6,5.9C33.8,33,31.1,35.7,27.8,35.7z'/><path fill='#EC008C' d='M27.8,14.2c2.2,0,4-1.8,4-3.9c0-2.2-1.8-3.9-4-3.9c-2.2,0-3.9,1.8-3.9,3.9c0,0.3,0,0.6,0.1,0.9l-9.4,5.8 c-0.7-0.5-1.5-0.9-2.5-0.9c-2.2,0-3.9,1.8-3.9,4c0,2.2,1.8,4,3.9,4c0.9,0,1.8-0.3,2.5-0.9l9.4,5.8c-0.1,0.3-0.1,0.6-0.1,0.8 c0,2.2,1.8,4,3.9,4c2.2,0,4-1.8,4-4c0-2.2-1.8-3.9-4-3.9c-0.9,0-1.8,0.3-2.5,0.9L16,20.8c0.1-0.3,0.1-0.6,0.1-0.8 c0-0.3,0-0.6-0.1-0.9l9.4-5.8C26.1,13.9,26.9,14.2,27.8,14.2z'/></g>";
 
// Open the playlist button in the controls panel
var openPlaylist = "40 40'><g><g opacity='0.1'><path fill='#231F20' d='M19.2,34.2c-1.1,0-2.1-0.5-2.8-1.3l-8.7-9.8c-1.2-1.4-1.3-3.4-0.1-4.9l8.7-11.1c0.7-0.9,1.8-1.5,3-1.5 c0.8,0,1.7,0.3,2.4,0.8c0.8,0.6,1.3,1.5,1.4,2.5c0.1,1-0.2,2-0.8,2.8l-6.7,8.6l6.6,7.4c1.4,1.6,1.3,4-0.3,5.4 C21,33.9,20.1,34.2,19.2,34.2z'/><path fill='#231F20' d='M29.5,34.2c-1.1,0-2.1-0.5-2.8-1.3L18,23.2c-1.2-1.4-1.3-3.4-0.1-4.9l8.7-11.1c0.7-0.9,1.8-1.5,3-1.5 c0.8,0,1.7,0.3,2.4,0.8c0.8,0.6,1.3,1.5,1.4,2.5c0.1,1-0.2,2-0.8,2.8l-6.7,8.6l6.6,7.4c1.4,1.6,1.3,4-0.3,5.4 C31.4,33.9,30.5,34.2,29.5,34.2z'/></g><g><path fill='#EC008C' d='M19.2,32.2c-0.5,0-1-0.2-1.4-0.6l-8.7-9.8c-0.6-0.7-0.6-1.6-0.1-2.3l8.7-11.1c0.6-0.8,1.8-0.9,2.5-0.3 c0.8,0.6,0.9,1.8,0.3,2.5l-7.8,9.9l7.7,8.6c0.7,0.7,0.6,1.9-0.1,2.6C20.1,32.1,19.6,32.2,19.2,32.2z'/><path fill='#EC008C' d='M29.5,32.2c-0.5,0-1-0.2-1.4-0.6l-8.7-9.8c-0.6-0.7-0.6-1.6-0.1-2.3l8.7-11.1c0.6-0.8,1.8-0.9,2.5-0.3 c0.8,0.6,0.9,1.8,0.3,2.5l-7.8,9.9l7.7,8.6c0.7,0.7,0.6,1.9-0.1,2.6C30.4,32.1,29.9,32.2,29.5,32.2z'/></g></g>";
 
// Play icon that is displayed over the thumbnail image in a playlist
var thumbnailOverlay = "30 30'><polygon fill='#FFFFFF' points='6.4,25.6 4.6,22.4 17.8,14.8 4.6,7.7 6.4,4.4 25.4,14.7'/>";
 
// Closed captions (CC) button in the controls panel
var captions = "15.7 8'><path fill='#FFFFFF' d='M7.4,1.5l-1,1C5.7,1.8,4.9,1.4,4,1.4c-0.7,0-1.3,0.3-1.8,0.7C1.7,2.7,1.5,3.3,1.5,4c0,0.5,0.1,1,0.3,1.4 s0.5,0.7,0.9,0.9c0.4,0.2,0.9,0.3,1.3,0.3c0.4,0,0.8-0.1,1.2-0.2C5.6,6.2,6,5.9,6.4,5.5l1,1C6.8,7.1,6.3,7.5,5.8,7.7 C5.3,7.9,4.7,8,4,8C2.9,8,1.9,7.6,1.1,6.9C0.4,6.1,0,5.2,0,4c0-0.8,0.2-1.4,0.5-2C0.9,1.4,1.4,0.9,2,0.5C2.6,0.2,3.3,0,4.1,0 c0.6,0,1.2,0.1,1.8,0.4S7,1,7.4,1.5z'/><path fill='#FFFFFF' d='M15.7,1.5l-1,1c-0.7-0.7-1.5-1.1-2.3-1.1c-0.7,0-1.3,0.3-1.8,0.7C10,2.7,9.7,3.3,9.7,4c0,0.5,0.1,1,0.3,1.4 c0.2,0.4,0.5,0.7,0.9,0.9s0.9,0.3,1.3,0.3c0.4,0,0.8-0.1,1.2-0.2c0.3-0.2,0.7-0.4,1.1-0.9l1,1c-0.6,0.5-1.1,0.9-1.6,1.1S13,8,12.3,8 c-1.2,0-2.2-0.4-2.9-1.1C8.7,6.1,8.3,5.2,8.3,4c0-0.8,0.2-1.4,0.5-2c0.3-0.6,0.8-1.1,1.5-1.4C10.9,0.2,11.6,0,12.3,0 c0.6,0,1.2,0.1,1.8,0.4C14.7,0.7,15.2,1,15.7,1.5z'/>";
 
// Volume bar when in effect
var volumeOn = "8.6 17.8'><path fill='#FFFFFF' enable-background='new' d='M4.6,0.4c0-0.1-0.1-0.2-0.2-0.3C4.2,0,4.1,0,4,0L0.4,0.9C0.1,1-0.1,1.3,0,1.5 l4,15.9c0,0.1,0.1,0.2,0.2,0.3c0.1,0,0.2,0.1,0.3,0.1h0.1l3.6-0.9c0.3-0.1,0.4-0.3,0.4-0.6L4.6,0.4z'/>";
 
// Volume bar when not in effect
var volumeOff = "8.6 17.8'><path opacity='0.3' fill='#FFFFFF' enable-background='new' d='M4.6,0.4c0-0.1-0.1-0.2-0.2-0.3C4.2,0,4.1,0,4,0L0.4,0.9 C0.1,1-0.1,1.3,0,1.5l4,15.9c0,0.1,0.1,0.2,0.2,0.3c0.1,0,0.2,0.1,0.3,0.1h0.1l3.6-0.9c0.3-0.1,0.4-0.3,0.4-0.6L4.6,0.4z'/>";
 
// Pause icon that is overlayed on top of the video, when the video is paused
var pauseButtonOverlay = "60 59.8'><path opacity='0.3' d='M30,0.6C13.8,0.6,0.7,13.7,0.7,29.9c0,16.2,13.1,29.3,29.3,29.3c16.2,0,29.3-13.1,29.3-29.3 C59.3,13.7,46.2,0.6,30,0.6z'/><g><line fill='none' stroke='#EC008C' stroke-width='4.7866' stroke-miterlimit='10' x1='24.8' y1='20.5' x2='24.8' y2='39.3'/><line fill='none' stroke='#EC008C' stroke-width='4.7866' stroke-miterlimit='10' x1='35.3' y1='20.5' x2='35.3' y2='39.3'/></g>";
 
// Next video button in the controls panel when the player is in the playlist mode
var next = "14.8 17.4'><polygon fill='#FFFFFF' points='2.1,17.4 0,14.3 8.2,8.6 0,3.1 2.1,0 14.8,8.5'/>";
 
// Previous video button in the controls panel when the player is in the playlist mode
var previous = "14.8 17.4'><polygon fill='#FFFFFF' points='12.6,17.4 14.8,14.3 6.6,8.6 14.8,3.1 12.7,0 0,8.5'/>";
 
// Repeat the video button in the controls panel when the video has ended
var repeat = "20.8 22.1'><path fill='#FFFFFF' d='M18.4,10.6c-1,0-1.7,0.9-1.7,1.7c0,3.5-2.8,6.3-6.3,6.3c-3.5,0-6.3-2.8-6.3-6.3c0-2.8,1.9-5.2,4.5-5.9 C8.5,7,8.7,7.7,9.2,8.2c0.3,0.3,0.9,0.5,1.2,0.5s0.9-0.2,1.2-0.5l2.6-2.6c0.3-0.3,0.5-0.7,0.5-1.2c0-0.5-0.2-0.9-0.5-1.2l-2.6-2.6 c-0.7-0.7-1.7-0.7-2.4,0C8.5,1.2,8.5,2.1,9,2.8c-4.7,0.7-8.4,4.7-8.4,9.6c0,5.4,4.3,9.7,9.7,9.7c5.4,0,9.7-4.4,9.7-9.7l0,0 C20.1,11.3,19.3,10.6,18.4,10.6z'/>"
 
// HD icon in the controls panel when the HD mode is turned on
var hdOn = "28.6 16.4'><g><path fill='#FFFFFF' d='M10.1,16.4v-7H2.2v7H0V0h2.2v7.2h7.8V0h2.2v16.4H10.1z'/><path fill='#FFFFFF' d='M28,11.3c-0.4,1-1,1.9-1.8,2.6c-0.8,0.7-1.7,1.3-2.8,1.8s-2.4,0.7-3.8,0.7h-4V0h4.2c1.4,0,2.6,0.2,3.7,0.6 s2,1,2.7,1.7S27.6,4,28,5c0.4,1,0.6,2,0.6,3.2C28.6,9.3,28.4,10.3,28,11.3z M25.8,5.8c-0.3-0.7-0.7-1.4-1.3-2s-1.2-1-2-1.3 C21.7,2.2,20.8,2,19.8,2h-1.9v12.3h1.5c1.2,0,2.3-0.2,3.1-0.5c0.9-0.4,1.6-0.8,2.1-1.4s1-1.2,1.2-2c0.3-0.7,0.4-1.5,0.4-2.3 C26.3,7.3,26.1,6.5,25.8,5.8z'/></g>";
 
// HD icon in the controls panel when the HD mode is turned off
var hdOff = "28.6 16.4'><g opacity='0.6'><path fill='#FFFFFF' d='M10.1,16.4v-7H2.2v7H0V0h2.2v7.2h7.8V0h2.2v16.4H10.1z'/><path fill='#FFFFFF' d='M28,11.3c-0.4,1-1,1.9-1.8,2.6c-0.8,0.7-1.7,1.3-2.8,1.8c-1.1,0.4-2.4,0.7-3.8,0.7h-4V0h4.2 c1.4,0,2.6,0.2,3.7,0.6s2,1,2.7,1.7C27.1,3.1,27.6,4,28,5c0.4,1,0.6,2,0.6,3.2C28.6,9.3,28.4,10.3,28,11.3z M25.8,5.8 c-0.3-0.7-0.7-1.4-1.3-2c-0.6-0.6-1.2-1-2-1.3C21.7,2.2,20.8,2,19.8,2h-1.9v12.3h1.5c1.2,0,2.3-0.2,3.1-0.5s1.6-0.8,2.1-1.4 s1-1.2,1.2-2s0.4-1.5,0.4-2.3C26.3,7.3,26.1,6.5,25.8,5.8z'/></g>";
 
$bp(",yDiv", {"id":"{PLAYER_ID}","width":"640","height":"360","playlist":"{PLAYLIST_ID}", "Skin": {
    "PlayToggle":playControl,
    "Pause":pause,
    "FullscreenToggle":fullscreenToogle,
    "FullscreenOff":fullscreenOff,
    "PlayButtonOverlay":playButtonOverlay,
    "MuteToggle":muteToggle,
    "Muted":muted,
    "OpenShare":share,
    "OpenPlaylist":openPlaylist,
    "ThumbnailOverlay":thumbnailOverlay,
    "captions":captions,
    "VolumeLevelOn":volumeOn,
    "VolumeLevelOff":volumeOff,
    "PauseButtonOverlay":pauseButtonOverlay,
    "Next":next,
    "Previous":previous,
    "Repeat":repeat,
    "HDToggleOn":hdOn,
    "HDToggleOff":hdOff,
    }, "Style":{"name":"/newskin.css", "skinClass":"brid-newskin-main"}}); </script>
      </body>
 </html>

📘

NOTE

Make sure to substitute {PLAYER_ID} and {PLAYLIST_ID} with proper ID's for your account.
Please contact us if you want us to host your custom skin.


Did this page help you?