<!DOCTYPE html>
<html>
  <head>
    <title>Dual Playback Demo</title>
    <style>
        body {
          margin: 0;
        }

        #player-layer {
          width: 100%;
          height: 100%;
        }

        video {
          width: 100%;
          height: 100%;
        }

        #ui-layer {
          position: absolute;
          top: 15%;
          height: 85%;
          width: 100%;
          background-color: rgba(33, 33, 33, .75);
          padding: 24px;
        }

        .item {
          width: 427px;
          height: 240px;
          display: inline-block;
          margin: 24px;
          vertical-align: middle;
        }
    </style>
  </head>
  <body>
    <div id="player-layer">
      <video class="primary" muted="" autoplay="1" src="bear.mp4" loop=""></video>
    </div>
    <div id="ui-layer">
      <div class="item" style="background-color: #DB4437"></div>
      <div class="item" style="background-color: #9E9E9E">
        <video class="secondary" muted="" autoplay="1" src="bear.mp4" loop=""></video>
      </div>
      <div class="item" style="background-color: #4285F4"></div>
      <div class="item" style="background-color: #0F9D58"></div>
      <div class="item" style="background-color: #F4B400"></div>
    </div>
  </body>
</html>