Controls UI Demo
<section>
<!-- Opentok video container -->
<ol class="stream-toolbar">
<li class="icon audio"></li>
<li class="icon video"></li>
</ol>
</section>
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;
}
- Toolbar by default: https://crdlc.github.io/controls-ui/demo-default.html
- Custom toolbar: https://crdlc.github.io/controls-ui/demo-custom.html