<!DOCTYPE html>
<!--
 | Copyright 2023 The Cobalt Authors. All Rights Reserved.
 |
 | Licensed under the Apache License, Version 2.0 (the "License");
 | you may not use this file except in compliance with the License.
 | You may obtain a copy of the License at
 |
 |     http://www.apache.org/licenses/LICENSE-2.0
 |
 | Unless required by applicable law or agreed to in writing, software
 | distributed under the License is distributed on an "AS IS" BASIS,
 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 | See the License for the specific language governing permissions and
 | limitations under the License.
 -->

<html>
  <head>
    <title>Multi Encrypted Video</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: 426px;
          height: 240px;
          display: inline-block;
          margin: 24px;
          vertical-align: middle;
        }
    </style>
  </head>
  <body>
    <div id="player-layer">
      <video class="primary" id="primary-video" muted="1" autoplay="1"></video>
    </div>
    <div id="ui-layer">
      <div class="item" style="background-color: #D44">
        <video class="secondary" id="secondary-video-1" muted="1" autoplay="1"></video>
      </div>
      <div class="item" style="background-color: #4D4">
        <video class="secondary" id="secondary-video-2" muted="1" autoplay="1"></video>
      </div>
      <div class="item" style="background-color: #44D">
        <video class="secondary" id="secondary-video-3" muted="1" autoplay="1"></video>
      </div>
    </div>
    <script src="multi-encrypted-video.js"></script>
  </body>
</html>