/controls-ui

Controls UI demo

Primary LanguageCSS

controls-ui

Controls UI Demo

HTML generated by our Widget

<section>
  <!-- Opentok video container -->
  <ol class="stream-toolbar">
    <li class="icon audio"></li>
    <li class="icon video"></li>
  </ol>
</section>

How to customize the stream's toolbar

Add a property called uiControlsTheme in styleOpts that overrides the stylesheet by default (check styles by default at https://crdlc.github.io/controls-ui/css/ui-controls.css)

E.g. uiControlsTheme: 'https://crdlc.github.io/controls-ui/css/my-ui-controls.css':

.stream-toolbar {
  top: calc(100% - 17px);
  left: calc(50% - 59px);

  background-color: #2ab4ea;
  border-radius: 34px;
  padding: 0 15px;
}

.stream-toolbar .icon {
  width: 24px;
  height: 24px;
  margin: 5px 10px;
  padding: 0;
}

Demo