2 changed files with 90 additions and 22 deletions
+ 33
- 22
pico.css
View File
| @@ -46,6 +46,7 @@ body { | |||
| } | |||
| .media { | |||
| grid-area: media; | |||
| position: relative; | |||
| } | |||
| #textbox { | |||
| resize: vertical; | |||
| @@ -54,49 +55,59 @@ body { | |||
| display: inline; | |||
| padding-left: var(--pad); | |||
| } | |||
| .video-meta { | |||
| position: absolute; | |||
| z-index: 999; | |||
| } | |||
| .video-option { | |||
| display: block; | |||
| } | |||
| .videos { | |||
| display: inline-grid; | |||
| display: grid; | |||
| grid-auto-flow: column; | |||
| grid-gap: 3px; | |||
| justify-content: start; | |||
| overflow: hidden; | |||
| resize: vertical; | |||
| overflow-x: scroll; | |||
| height: 200px; | |||
| width: 100%; | |||
| resize: vertical; | |||
| } | |||
| .video-container { | |||
| background-color: lightsteelblue; | |||
| display: inline-block; | |||
| position: relative; | |||
| height: 100%; | |||
| overflow: scroll; | |||
| } | |||
| .video-meta { | |||
| position: absolute; | |||
| z-index: 999; | |||
| } | |||
| .video-option { | |||
| display: block; | |||
| } | |||
| .video-container video { | |||
| position: absolute; | |||
| background-color: black; | |||
| height: 100%; | |||
| width: 100%; | |||
| } | |||
| /* mirror */ | |||
| .video-container.mirror video { | |||
| transform: scaleX(-1); | |||
| } | |||
| /* square */ | |||
| .video-container.square { | |||
| height: 100%; | |||
| width: var(--height); | |||
| overflow: hidden; | |||
| } | |||
| .video-container.square video { | |||
| object-fit: cover; | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .video-container.mirror video { | |||
| transform: scaleX(-1); | |||
| } | |||
| /* 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 { | |||
| position: relative; | |||
| object-fit: contain; | |||
| width: unset; | |||
| height: unset; | |||
| } | |||
| @media only screen and (min-width: 800px) { | |||
| .chat { | |||
+ 57
- 0
test.html
View File
| @@ -0,0 +1,57 @@ | |||
| <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…