| <!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> |
