From 542c44642f2115f5d3c843936c376f5cb6d92cb1 Mon Sep 17 00:00:00 2001
From: Ze Bateira <jose.bateira@protonmail.com>
Date: Thu, 15 Apr 2021 11:56:50 +0100
Subject: [PATCH] fix: use aspect ratio to correctly size iframes

---
 src/.vuepress/theme/layouts/BlogPost.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/.vuepress/theme/layouts/BlogPost.vue b/src/.vuepress/theme/layouts/BlogPost.vue
index 8c954a05..d2fc876e 100644
--- a/src/.vuepress/theme/layouts/BlogPost.vue
+++ b/src/.vuepress/theme/layouts/BlogPost.vue
@@ -76,4 +76,18 @@ export default {
   padding-bottom: 0.5rem;
   border-bottom: 2px solid #d1d1d663;
 }
+
+.blog > iframe {
+  @apply mx-auto;
+  @apply max-w-full;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  .blog > iframe {
+    @apply h-52;
+    @apply sm:h-80;
+  }
+}
 </style>