How to style Oovvuu Embeds

When a player is created it is possible to implement some styles to customise the player to your own website. To do this you will need to implement the css styles accordingly, as we use a brightcove player it maybe necessary to use some of the brightcove styling too (https://gallery.support.brightcove.com/develop/page-experiences-custom-css-reference.html) 

• Current Oovvuu Embeds will have their styles start from a root .oovvuu-player-embed class.

• Oovvuu Embeds aren't natively designed to be modified, but it's easy to do with some CSS.

• All internal Oovvuu styles are prefixed with an ov- or svelte- prefix. Please do not use these as anchor points. These ideally aren't meant to be modified, and these might be re-used elsewhere and cause undesired effects, or can change between builds.

• We've added classes prefixed with ovx- (think Oovvuu Extension) that provide a semantic anchor point to make it easier to style components in a safer and easier manner. These classes have no styles of their own, and are there to help developers style them or their close children.

Examples

Changing the style of the Video Details

.oovvuu-embed-player .ovx-video-info { background: antiquewhite; }

Changing the background of buttons on OneByThree and OneByFour players, and hover color