| <!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>Video Elements With Background</title> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| video { |
| width: 100%; |
| height: 100%; |
| } |
| |
| #ui-layer { |
| display: flex; |
| justify-content: space-between; |
| position: absolute; |
| top: 15%; |
| height: 85%; |
| width: 100%; |
| background-color: rgba(33, 33, 33, .75); |
| padding: 24px; |
| margin: auto; |
| } |
| |
| .item { |
| width: 320px; |
| height: 240px; |
| display: inline-block; |
| margin: 24px; |
| vertical-align: middle; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="ui-layer"> |
| <div class="item"> |
| <video id="video1" muted="1" style="background-color: #4285F4"> |
| </video> |
| </div> |
| <div class="item"> |
| <video id="video2" muted="1" |
| style="background-image: url(sddefault.jpg); |
| background-size: 320px 240px;"> |
| </video> |
| </div> |
| <div class="item"> |
| <video id="video3" muted="1" style="background-color: #4285F4"> |
| </video> |
| </div> |
| <div class="item"> |
| <video id="video4" muted="1" |
| style="background-image: url(sddefault.jpg); |
| background-size: 320px 240px;"> |
| </video> |
| </div> |
| </div> |
| <script src="video-background-demo.js"></script> |
| </body> |
| </html> |
