Video Title

HTML

<script src="https://unpkg.com/playable/dist/statics/playable.bundle.min.js"></script>
<div id="wrapper">
  <div id="content"></div>
  <div id="theme-switcher">
    <h3 id="theme-title">Switch progress bar color: </h3>
    <div id="theme-toggles">
      <button data-color="#FFF">white</button>
      <button data-color="#F00">red</button>
      <button data-color="#0F0">green</button>
      <button data-color="#00F">blue</button>
    </div>
  </div>
</div>

CSS

#wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#theme-switcher {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#theme-title {
  font-family: Arial;
  color: rgb(171, 185, 194);
}

JavaScript

const player = Playable.create({
  width: 600,
  height: 337,
  hideOverlay: true,
  src: 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
});
player.attachToElement(document.getElementById('content'));

const themeSwitcher = document.getElementById('theme-switcher');
themeSwitcher.addEventListener('click', ev => {
  const {
    color
  } = ev.target.dataset;
  if (!color) {
    return;
  }

  player.updateTheme({
    progressColor: color
  });
});