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>