Custom skin
Guide to creating a custom skin for the Targetvideo 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 Targetvideo 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 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 Targetvideo Team used for one of our official skins - skin file
!!! Note that in the above CSS file {SKIN_NAME} is minimalist.
Using your newly created skin CSS file with a Targetvideo 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 Targetvideo 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 Targetvideo 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.
Updated over 2 years ago