Skip to main content

Change color example

In this example we are going to show you how to change the colors of the player, In this example we are going to start simple, make the current playback position green instead of the standard white.

Live Example#

As you can now see we have succesfully changed the theme of the player, but there are way more possibilities

The code#

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type='text/javascript' src="//cdn.jet-stream.com/static/pp/2.1.0/privacy-player.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<style>
html, body {
background: none transparent;
}
</style>
</head>
<body>
<!-- then we make a div to put the player into-->
<div style="height: 300px; width: 480px; position: relative; ">
<div id="video-wrapper" style="height: 300px; width: 400px; "></div>
</div>
<!-- Then we make a div with our 2 buttons -->
<div style=" width: 480px; text-align: center">
<button class="btn btn-primary" onclick="player.play()">Play</button>
<button class="btn btn-primary" onclick="player.pause()">Pause</button>
</div>
</body>
<script type="text/javascript">
// in out script tag we make the wrapper and declare the player so that we have something we can controll with all te functions
let video_wrapper = document.querySelector("#video-wrapper")
// here we set the theme for the player, you can use the emebedcode generator in VDO-X to do this automatically
let options = {
'theme': {
'controlBarText': '#0b2e47',
'controlBarButtons': '#22aca3',
'progressBarBackground': 'rgba(55, 122, 181, .7)',
'progressBarLoaded':'#22aca3',
'progressBarPlayed': '#22aca3',
'volumeBarLevel' : '#22aca3',
'progressBarPosition': '#377ab5',
'overlayText': '#377ab5',
'controlBarBackground': 'rgba( 11, 46, 71, .7)',
'volumeBarBackground' : 'rgba(55, 122, 181 , .7)'
}
}
let player = new PrivacyPlayerPro(
"https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6.smil&type=streaming&service=wowza&sub=readysetrocknroll6_EN.vtt,readysetrocknroll6_NL.vtt&output=player&events=1",
video_wrapper, true, true, options
)
</script>
</html>