diff --git a/web/static/css/player.css b/web/static/css/player.css index 180dfb9..41cd687 100644 --- a/web/static/css/player.css +++ b/web/static/css/player.css @@ -1,18 +1,9 @@ /* Player */ -.video-responsive { - position: relative; - padding-top: 56.25%; /* 16/9 */ -} +video { + display: block; + flex-grow: 1; -.video-responsive video { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - - /* Black borders when video is not 16/9 */ + /* Black borders around video */ 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, diff --git a/web/static/css/style.css b/web/static/css/style.css index a981f0c..b5d93ae 100644 --- a/web/static/css/style.css +++ b/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; - - /* Limit max width to limit video size */ - margin: auto; - max-width: 1200px; + display: flex; + flex-direction: column; } .col-chat { diff --git a/web/template/player.html b/web/template/player.html index 46749bf..3e340a4 100644 --- a/web/template/player.html +++ b/web/template/player.html @@ -2,9 +2,7 @@
-
- -
+