Center main element to detect position calculation errors

dashdashzako · dashdashzako · commit e571b94ea3ca · 2019-11-19T11:35:40.000+01:00
diff --git a/public/aiana.css b/public/aiana.css
@@ -9,13 +9,24 @@ html,
 body {
   margin: 0;
   padding: 0;
+
+  min-height: 100%;
 }
 
 body {
   font-size: 100%;
   font-family: system;
 }
 
+.player-wrapper {
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 /*
   The wanted canvas ratio is 16/9. To achieve that with a fixed width at
   800px, height should be 450px plus the height of the controls.
diff --git a/public/index.html b/public/index.html
@@ -12,27 +12,30 @@
 </head>
 
 <body>
-  <noscript>
-    <div class="aip-app aip-app__unmounted">
-      <video src="/dev/standard.mp4" type="video/mp4" preload="auto" controls>
+  <div class="player-wrapper">
+    <noscript>
+      <div class="aip-app aip-app__unmounted">
+        <video src="/dev/standard.mp4" type="video/mp4" preload="auto" controls>
 
-        <track kind="captions" src="/dev/subtitles_en.vtt" srclang="en" label="Subtitles" />
-        <track kind="captions" src="/dev/subtitles_fr.vtt" srclang="fr" label="Sous-titres" />
+          <track kind="captions" src="/dev/subtitles_en.vtt" srclang="en" label="Subtitles" />
+          <track kind="captions" src="/dev/subtitles_fr.vtt" srclang="fr" label="Sous-titres" />
 
-        <track kind="chapters" src="/dev/chapters_en.vtt" srclang="en" label="Chapters" />
-        <track kind="chapters" src="/dev/chapters_fr.vtt" srclang="fr" label="Chapitres" />
+          <track kind="chapters" src="/dev/chapters_en.vtt" srclang="en" label="Chapters" />
+          <track kind="chapters" src="/dev/chapters_fr.vtt" srclang="fr" label="Chapitres" />
 
-        <track kind="metadata" src="/dev/slides_en.vtt" srclang="en" label="Presentation Slides" />
-        <track kind="metadata" src="/dev/slides_fr.vtt" srclang="fr" label="Slides de Présentation" />
+          <track kind="metadata" src="/dev/slides_en.vtt" srclang="en" label="Presentation Slides" />
+          <track kind="metadata" src="/dev/slides_fr.vtt" srclang="fr" label="Slides de Présentation" />
 
-        <track kind="metadata" src="/dev/additional-information_en.vtt" srclang="en" label="Additional Information" />
-        <track kind="metadata" src="/dev/additional-information_fr.vtt" srclang="fr"
-          label="Informations Complémentaires" />
-      </video>
-    </div>
-  </noscript>
+          <track kind="metadata" src="/dev/additional-information_en.vtt" srclang="en" label="Additional Information" />
+          <track kind="metadata" src="/dev/additional-information_fr.vtt" srclang="fr"
+            label="Informations Complémentaires" />
+        </video>
+      </div>
+    </noscript>
 
-  <div id="root"></div>
+    <div id="root"></div>
+
+  </div>
 
   <script>
     window.aiana = {
