ResizeObserver

pico.js

@@ -181,6 +181,7 @@ const hotKey = (e) => {
     }
 }
 const Video = {
+    keepRatio: {observe: () => {}},
     appendStream: ({username, stream}) => ({dom}) => {
         dom.autoplay = true
         dom.muted = (username === State.username)
@@ -189,7 +190,7 @@ const Video = {
     },
     view({attrs}) {
         const rpc = State.rpcs[attrs.username] || {iceConnectionState: m.trust(' ')}
-        return m('.video-container',
+        return m('.video-container', {oncreate: ({dom}) => Video.keepRatio.observe(dom)},
             m('.video-meta',
                 m('.video-source', attrs.username),
                 m('.video-state', rpc.iceConnectionState),
@@ -198,6 +199,11 @@ const Video = {
         )
     },
 }
+if(window.ResizeObserver) {
+    const doOne = ({target}) => target.style.width = `${target.clientHeight}px`
+    const doAll = (entries) => entries.forEach(doOne)
+    Video.keepRatio = new ResizeObserver(doAll)
+}
 const Media = {
     videoSources: ['camera', 'screen', 'none'],
     audioDefaults: {