From fc6d5d5f8edf7cace9b4dbd3b6f63e49053524e6 Mon Sep 17 00:00:00 2001
From: Felix Albrigtsen <felixalbrigtsen@gmail.com>
Date: Mon, 8 Aug 2022 16:36:58 +0200
Subject: [PATCH] Update CSS to preserve video aspect ratio

---
 www/index.php | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/www/index.php b/www/index.php
index 2203a46..b3ef2a6 100644
--- a/www/index.php
+++ b/www/index.php
@@ -45,12 +45,12 @@ $doorTime = date("H:i", $doorEntry->time);
     		.iframe-container {
     		  position: relative;
     		  overflow: hidden;
-    		  width: 100%;
-    		  padding-top: 30%;
+                  max-width: 100%;
+    		  max-height: 100%;
+                  aspect-ratio: 16/9;
                   margin: 0 auto;
     		}
 
-    		/* Then style the iframe to fit in the container div with full height and width */
     		.responsive-iframe {
     		  position: absolute;
     		  top: 0;
@@ -58,13 +58,8 @@ $doorTime = date("H:i", $doorEntry->time);
     		  bottom: 0;
     		  right: 0;
     		  width: 100%;
-    		  height: 100%;
+                  aspect-ratio: 16/9;
     		}
-                @media (max-width: 768px) {
-                    .iframe-container {
-                        padding-top: 0;
-                    }
-                }
 		</style>
 		<div class="iframe-container" style="max-width: 100em;">
     		<iframe class="responsive-iframe" src="https://www.youtube.com/embed/Uy6HAvMdeuA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>