Make player flex

web/static/css/player.css

@@ -1,18 +1,9 @@
 /* Player */
-.video-responsive {
+video {
-  position: relative;
+  display: block;
-  padding-top: 56.25%; /* 16/9 */
+  flex-grow: 1;
-}
 
-.video-responsive video {
+  /* Black borders around video */
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  /* Black borders when video is not 16/9 */
   background-color: #000;
 }
 
@@ -22,6 +13,7 @@
   padding: 0.2rem 0.5rem;
   color: rgb(187, 187, 187);
   user-select: none;
+  text-align: right;
 }
 
 .control-quality,

web/static/css/style.css

@@ -43,20 +43,15 @@ h1, h2, h3, h4 {
 
 .container {
   height: 100%;
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
-  height: 100%;
 }
 
 .col-video {
   flex-basis: 0;
   flex-grow: 1;
-  text-align: right;
+  display: flex;
-
+  flex-direction: column;
-  /* Limit max width to limit video size */
-  margin: auto;
-  max-width: 1200px;
 }
 
 .col-chat {

web/template/player.html

@@ -2,9 +2,7 @@
 <div class="container">
   <div class="col-video">
     <!-- Video -->
-    <div class="video-responsive">
+    <video id="viewer" poster="{{.Cfg.PlayerPoster}}" muted controls autoplay></video>
-      <video id="viewer" poster="{{.Cfg.PlayerPoster}}" muted controls autoplay></video>
-    </div>
 
     <!-- Links and settings under video -->
     <div class="controls">