attempt side-by-side video/text

app/static/css/partials/_player.scss

@@ -36,22 +36,43 @@
     }
 
   }
-  .vbox {
+  .stage {
-    max-width: var(--container-width);
+    display: flex;
-    margin: auto;
+    flex-direction: row;
-    text-align: center;
+    margin: 8px;
-  }
+    @media (max-aspect-ratio: 4 / 3) {
-  .player {
+      margin-left: 0px;
-    width: 100%;
+      margin-right: 0px;
-    height: auto;
+      flex-direction: column;
-    max-width: var(--container-width);
+    }
-    max-height: 80vh;
+    .vbox {
-    margin: auto;
+      max-width: var(--container-width);
-  }
+      margin: auto;
-  .annotation {
+      margin-top: 0;
-    display: none;
+      width: 100%;
-    text-align: center;
+      .player {
-    max-width: 90%;
+        width: 100%;
-    margin: auto;
+        height: auto;
+        max-width: var(--container-width);
+        max-height: 80vh;
+        margin: auto;
+      }
+    }
+    .annotations {
+      width: 100%;
+      margin-top: auto;
+      @media (max-aspect-ratio: 4 / 3) {
+        max-width: 90%;
+        text-align: center;
+      }
+      height: 100%;
+      b {
+        font-weight: bold;
+      }
+      .annotation {
+        display: none;
+        margin: auto;
+      }
+    }
   }
 }

app/static/js/play.js

@@ -208,12 +208,18 @@ function renderPlayer(config) {
     box.classList.add('vbox')
     box.appendChild(video)
     config.info = formatInfo(config, player)
-    player.appendChild(box)
 
+    var stage = document.createElement('div')
+    stage.classList.add('stage')
+    stage.appendChild(box)
 
+    var div = document.createElement('div')
+    div.classList.add('annotations')
     config.annotations.forEach(annotation => {
-        renderAnnotation(config, video, player, annotation)
+        renderAnnotation(config, video, div, annotation)
     })
+    stage.appendChild(div)
+    player.appendChild(stage)
     config.loaded = true
 }