attempt side-by-side video/text

app/static/css/partials/_player.scss

@@ -36,11 +36,20 @@
     }
 
   }
+  .stage {
+    display: flex;
+    flex-direction: row;
+    margin: 8px;
+    @media (max-aspect-ratio: 4 / 3) {
+      margin-left: 0px;
+      margin-right: 0px;
+      flex-direction: column;
+    }
     .vbox {
       max-width: var(--container-width);
       margin: auto;
-    text-align: center;
+      margin-top: 0;
-  }
+      width: 100%;
       .player {
         width: 100%;
         height: auto;
@@ -48,10 +57,22 @@
         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;
-    text-align: center;
-    max-width: 90%;
         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
 }