Create a 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 neccessary 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 name Description
.brid-{SKIN_NAME}-main This 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-controls Used for styling the player controls bar.
.brid-control Used to define a default style that will be applied to the players control buttons (play/pause, previous, next, hd toggle button etc.)
.brid-control > svg Default styling for the SVG tag element of buttons. Commonly used to define the width and height of an SVG element.
.brid-play-control Container for the "Play" button.
.brid-play-control > svg Styling the width and height for the SVG element of the "Play/Pause" and “Repeat” buttons (Associated SVG element “PlayToggle”, “Pause” and “Repeat”).
.brid-previous-control Container for the "Previous" button (shown only in Playlist mode).
.brid-previous control > svg Styling the width and height for the SVG element of the "Previous" button (Associated SVG element “Previous”).
.brid-next-button Container for the "Next" button (shown only in Playlist mode).
.brid-next-button > svg Styling the width and height for the SVG element of the"Next" button (Associated SVG element “Next”).
.brid-mute-control Container for the "Mute" button.
.brid-mute-control > svg Styling the width and height for the SVG element of the "Mute" button (Associated SVG element “MuteToggle” and “Muted).
.brid-volume-control Parent class used for positioning of volume controls.
.brid-volume-bar Wraps the volume bars (both active - the ones that contribute to the volume level and inactive - the ones that don’t).
.bar-bracket Class that is used to style a single volume bar that is not active.
.brid-volume-level Class that wraps all of the .level-bracket elements.
.level-bracket Class that is used to style a single volume bar that is active.
.brid-time-controls Used to style font and position properties of the time display.
.brid-current-time Used to style the current time display.
.brid-duration Used to style the total time display.
.brid-time-divider Used to style the time divider element “/” between the current and total time display.
.brid-fullscreen-control Container for the fullscreen button.
.brid-fullscreen-control > svg Styling the width and height for the SVG element of the "Fullscreen" button (Associated SVG element “FullscreenToggle” and “FullscreenOff”).
.brid-hd-control Container for the HD button toggle.
.brid-hd-control > svg Styling the width and height for the SVG element of the "HD" button (Associated SVG element “HDToggleOn” and “HDToggleOff”).
.brid-share-control > svg Styling the width and height for the SVG element of the "Share" button (Associated SVG element “OpenShare”).
.brid-playlist-control > svg Styling the width and height for the SVG element of the "Playlist" button (Associated SVG element “OpenPlaylist”).
.brid-captions-control > svg Styling the width an height of the SVG element of the “Captions” button (Associated SVG element “captions”).
.brid-thumb-holder Styling 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-title Styling 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-captions Styling for the caption text.
.brid-subtitles Styling 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 name Description
.brid-poster-title Class assigned to a far-top container which holds the name of the video.
.brid-poster-title > div Style the text that will be inserted in the .brid-poster-title > div.

Player progress bar CSS classes reference

Class name Description
.brid-progress-control Parent container for the progress controls styled with size and position.
.brid-progress-holder Child 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-progress Styling for the timeline of the progress bar that has been played back.
.brid-load-progress Styling 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:

Name Description Example
PlayToggle Play control button 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'/>
Pause Pause control button 20.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>
FullscreenToggle Fullscreen button when the player is not in Fullscreen mode 18.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>
FullscreenOff Fullccreen button when the player is in Fullscreen mode 18.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>
PlayButtonOverlay Play icon that is overlayed when video is loaded 60 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>
MuteToggle Speaker icon 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 Mute icon when the sound is 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>
OpenShare Share icon 24 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' />
OpenPlaylist Open Playlist icon 240 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>
ThumbnailOverlay Play icon that is displayed over the thumbnail image in a playlist 30 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'/>
Captions Captions icon 19 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>
PauseButtonOverlay Pause 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>
Next Next video icon, when in playlist mode 24 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>
Previous Previous video icon, when in playlist mode 24 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>
Repeat Repeat icon, shown when video has ended 20.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'\/>
HDToggleOn HD icon when HD mode is turned on 22.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>
HDToggleOff HD icon when HD mode is turned off 22.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>
Brand Branding icon 16.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 automaticaly 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.brid.tv/player/build/brid.min.js"></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>

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.