More sensible CSS

pico.css

@@ -68,7 +68,7 @@ body {
     background-color: lightsteelblue;
     display: inline-block;
     position: relative;
-    overflow: hidden;
+    overflow: scroll;
 }
 .video-meta {
     position: absolute;
@@ -77,22 +77,18 @@ body {
 .video-option {
     display: block;
 }
-.video-container video {
-    object-fit: cover;
-    height: 100%;
-    width: 100%;
-}
 .video-container:not(.visible) {
     display: none;
 }
-.video-container:not(.square) {
-    width: unset !important;
-    overflow: scroll;
+.video-container.square {
+    height: 100%;
+    width: var(--height);
+    overflow: hidden;
 }
-.video-container:not(.square) video {
-    object-fit: unset;
-    height: unset;
-    width: unset;
+.video-container.square video {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
 }
 .video-container.mirror video {
     transform: scaleX(-1);

pico.js

@@ -230,7 +230,7 @@ const Video = {
     },
 }
 if(window.ResizeObserver) {
-    const doOne = ({target}) => target.style.width = `${target.clientHeight}px`
+    const doOne = ({target}) => target.style.setProperty('--height', `${target.clientHeight}px`)
     const doAll = (entries) => entries.forEach(doOne)
     Video.keepRatio = new ResizeObserver(doAll)
 }