CSS video changes

apps/streams.js

@@ -137,18 +137,28 @@ const Video = {
             color: 'white',
             overflow: 'hidden',
         }
-        const styleInner = {
-            objectFit: 'cover',
+        const styleMeta = {
+            position: 'absolute',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            width: '100%',
+            fontFamily: 'monospace',
+            fontSize: 'xxx-large',
+        }
+        const styleVideo = {
+            objectFit: 'contain', // cover
             width: '100%',
             height: '100%',
             transform: 'scaleX(-1)',
         }
         return m('.video-container', {style: styleOuter},
-            m('.video-info', {style: {position: 'absolute', zIndex: 999}},
-                m('span', {style: {padding: '5px'}}, username),
+            m('.video-info', {style: styleMeta},
+                m('.username', username),
             ),
             m('video[playsinline][autoplay]', {
-                style: styleInner,
+                style: styleVideo,
                 oncreate: this.setUp(username),
                 onremove: this.tearDown(username),
             }),
@@ -174,8 +184,8 @@ const StreamContainer = {
         const style = {
             overflow: 'hidden',
             display: 'grid',
-            padding: '3px',
-            gridGap: '3px',
+            padding: '1px',
+            gridGap: '1px',
             gridTemplateRows: dims[0],
             gridTemplateColumns: dims[1],
         }