From 88d0fb184c0c19735f0654192e717c40de6b38bc Mon Sep 17 00:00:00 2001
From: girst <tobi@isticktoit.net>
Date: Thu, 4 Jun 2020 21:10:59 +0200
Subject: [PATCH] apply aspect ratio to video element

test videos: vertical video: Vn1-Jvnhz6U; 2:1: l06PlYNShpQ
object-fit *does* affect the video too :(
---
 app/static/style.css        | 16 ++++++++++++++++
 app/templates/watch.html.j2 |  6 ++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/static/style.css b/app/static/style.css
index 8a25fb8..9e0edc3 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -109,3 +109,19 @@ ul#submgr{list-style: none}
 .video_error a:hover, .video_error a:active {
   color:#a00;
 }
+
+.main-video {
+  width: 100%;
+}
+/* https://stackoverflow.com/a/20201563 */
+.aspect-ratio {
+  position: relative;
+  /* Note: clamping aspect-ratio, to avoid vertical videos going off-screen */
+  padding-top: calc( 100% / max(var(--aspect-ratio), 4/3) );
+}
+.aspect-ratio video {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/app/templates/watch.html.j2 b/app/templates/watch.html.j2
index e8b44b5..b63e0ea 100644
--- a/app/templates/watch.html.j2
+++ b/app/templates/watch.html.j2
@@ -9,14 +9,16 @@
 
 {% include 'messages.inc.j2' %}
 
-<div id=main style="margin:auto">{#XXX: object-fit:cover affects poster, not video#}
+<div id=main style="margin:auto">
 {% if video_url %}
-<video controls poster="{{ poster }}" style="width:100%;object-fit:cover;height:calc(100% / {{ aspectr }});">
+<div class="aspect-ratio main-video" style="--aspect-ratio:{{ aspectr }}">
+<video controls poster="{{ poster }}">
 	<source src="{{ video_url }}">
 	{% for cc in subtitles %}
 	<track label="{{ cc.name }}" kind="subtitles" srclang="{{ cc.code }}" src="{{ cc.url }}" {{ 'default' if not loop.counter }}>
 	{% endfor %}
 </video>
+</div>
 {% else %}{#TODO: this'll break livestreams #}
 <img src="{{ poster }}" style="width:100%;object-fit:cover;height:calc(100% / {{ aspectr }});">
 {% endif %}
-- 
2.39.3