From 3afb46bfabba332e75951ea43468b766d2fa0980 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 31 Jan 2022 11:43:41 +0100
Subject: [PATCH] Fix iframe width and height CSS

---
 webapp/components/Embed/EmbedComponent.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/webapp/components/Embed/EmbedComponent.vue b/webapp/components/Embed/EmbedComponent.vue
index 6161f8f70..af9520538 100644
--- a/webapp/components/Embed/EmbedComponent.vue
+++ b/webapp/components/Embed/EmbedComponent.vue
@@ -179,10 +179,24 @@ export default {
     }
 
     .html {
-      width: 100%;
+      // width: 100%;
+      // height: 100%;
+
+      // see this working solution here: https://stackoverflow.com/questions/35814653/automatic-height-when-embedding-a-youtube-video
+      position: relative;
+      padding-bottom: 56.25%; /* 16:9 */
+      height: 0;
 
       iframe {
+        // width: 100%;
+        // height: auto;
+
+        // same solution example as above
+        position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
+        height: 100%;
       }
     }