2 changed files with 90 additions and 22 deletions
+ 33
- 22
pico.css
View File
| } | } | ||||
| .media { | .media { | ||||
| grid-area: media; | grid-area: media; | ||||
| position: relative; | |||||
| } | } | ||||
| #textbox { | #textbox { | ||||
| resize: vertical; | resize: vertical; | ||||
| display: inline; | display: inline; | ||||
| padding-left: var(--pad); | padding-left: var(--pad); | ||||
| } | } | ||||
| .video-meta { | |||||
| position: absolute; | |||||
| z-index: 999; | |||||
| } | |||||
| .video-option { | |||||
| display: block; | |||||
| } | |||||
| .videos { | .videos { | ||||
| display: inline-grid; | |||||
| display: grid; | |||||
| grid-auto-flow: column; | grid-auto-flow: column; | ||||
| grid-gap: 3px; | |||||
| justify-content: start; | justify-content: start; | ||||
| overflow: hidden; | |||||
| resize: vertical; | |||||
| overflow-x: scroll; | |||||
| height: 200px; | height: 200px; | ||||
| width: 100%; | |||||
| resize: vertical; | |||||
| } | } | ||||
| .video-container { | .video-container { | ||||
| background-color: lightsteelblue; | |||||
| display: inline-block; | display: inline-block; | ||||
| position: relative; | position: relative; | ||||
| height: 100%; | |||||
| overflow: scroll; | overflow: scroll; | ||||
| } | } | ||||
| .video-meta { | |||||
| position: absolute; | |||||
| z-index: 999; | |||||
| } | |||||
| .video-option { | |||||
| display: block; | |||||
| } | |||||
| .video-container video { | .video-container video { | ||||
| position: absolute; | |||||
| background-color: black; | |||||
| height: 100%; | |||||
| width: 100%; | |||||
| } | |||||
| /* mirror */ | |||||
| .video-container.mirror video { | |||||
| transform: scaleX(-1); | |||||
| } | } | ||||
| /* square */ | |||||
| .video-container.square { | .video-container.square { | ||||
| height: 100%; | |||||
| width: var(--height); | width: var(--height); | ||||
| overflow: hidden; | |||||
| } | } | ||||
| .video-container.square video { | .video-container.square video { | ||||
| object-fit: cover; | object-fit: cover; | ||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| .video-container.mirror video { | |||||
| transform: scaleX(-1); | |||||
| } | } | ||||
| /* full-screen */ | |||||
| .video-container.full-screen { | .video-container.full-screen { | ||||
| position: initial; | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| right: 0; | |||||
| width: unset; | |||||
| z-index: 999; | |||||
| overflow: scroll; | |||||
| background-color: black; | |||||
| } | } | ||||
| .video-container.full-screen video { | .video-container.full-screen video { | ||||
| position: relative; | |||||
| object-fit: contain; | |||||
| width: unset; | |||||
| height: unset; | |||||
| } | } | ||||
| @media only screen and (min-width: 800px) { | @media only screen and (min-width: 800px) { | ||||
| .chat { | .chat { |
+ 57
- 0
test.html
View File
| <meta charset="utf-8"/> | |||||
| <link rel="stylesheet" href="/pico.css" /> | |||||
| <style> | |||||
| body { | |||||
| margin: 0; | |||||
| } | |||||
| .media { | |||||
| position: fixed; | |||||
| top: 50; | |||||
| left: 100; | |||||
| width: 800; | |||||
| height: 300; | |||||
| background-color: crimson; | |||||
| padding: 1em; | |||||
| overflow: hidden; | |||||
| resize: both; | |||||
| } | |||||
| .videos { | |||||
| --pad: 3px; | |||||
| grid-gap: var(--pad); | |||||
| padding: var(--pad); | |||||
| height: calc(100% - 2 * var(--pad)); | |||||
| background-color: royalblue; | |||||
| } | |||||
| </style> | |||||
| <body> | |||||
| <div class="media"> | |||||
| <div class="videos"> | |||||
| <div class="video-container mirror"> | |||||
| <video autoplay></video> | |||||
| </div> | |||||
| <div class="video-container mirror square"> | |||||
| <video autoplay></video> | |||||
| </div> | |||||
| <div class="video-container mirror"> | |||||
| <video autoplay></video> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </body> | |||||
| <script> | |||||
| navigator.mediaDevices.getUserMedia({audio: false, video: true}) | |||||
| .then(stream => document.querySelectorAll('video') | |||||
| .forEach(video => video.srcObject = stream)) | |||||
| </script> | |||||
| <script> | |||||
| const doOne = ({target}) => target.style.setProperty('--height', `${target.clientHeight}px`) | |||||
| const doAll = (entries) => entries.forEach(doOne) | |||||
| sizer = new ResizeObserver(doAll) | |||||
| document.querySelectorAll('.video-container').forEach(el => sizer.observe(el)) | |||||
| document.querySelectorAll('.video-container').forEach(el => | |||||
| el.onclick = (ev) => el.classList.toggle('full-screen')) | |||||
| </script> |
Loading…