diff --git a/src/.vuepress/theme/layouts/BlogPost.vue b/src/.vuepress/theme/layouts/BlogPost.vue
index 8c954a05..d2b5a6c9 100644
--- a/src/.vuepress/theme/layouts/BlogPost.vue
+++ b/src/.vuepress/theme/layouts/BlogPost.vue
@@ -76,4 +76,23 @@ export default {
   padding-bottom: 0.5rem;
   border-bottom: 2px solid #d1d1d663;
 }
+
+.blog > iframe {
+  @apply mx-auto;
+}
+
+.blog > iframe[src*='youtube'],
+.blog > iframe[src*='vimeo'] {
+  @apply max-w-full;
+  height: auto;
+  aspect-ratio: 16 / 9;
+}
+
+@supports not (aspect-ratio: 1 / 1) {
+  .blog > iframe[src*='youtube'],
+  .blog > iframe[src*='vimeo'] {
+    @apply h-52;
+    @apply sm:h-80;
+  }
+}
 </style>
diff --git a/src/.vuepress/theme/styles/index.css b/src/.vuepress/theme/styles/index.css
index 157f6989..4110d612 100644
--- a/src/.vuepress/theme/styles/index.css
+++ b/src/.vuepress/theme/styles/index.css
@@ -9,16 +9,7 @@ pre {
   padding: 1.25rem 1.5rem;
   background-color: #0e2333;
   border-radius: 6px;
-}
-
-pre > code {
-  padding: 0;
-  background-color: transparent;
-  border-radius: 0;
-  color: #fff;
-  font-size: 0.85em;
-  white-space: pre-wrap;
-  word-break: break-all;
+  overflow-x: auto;
 }
 
 code {
@@ -28,4 +19,16 @@ code {
   border-radius: 3px;
   color: rgba(51, 51, 51, 0.8);
   font-size: 0.85em;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+pre > code {
+  padding: 0;
+  background-color: transparent;
+  border-radius: 0;
+  color: #fff;
+  font-size: 0.85em;
+  white-space: unset;
+  word-break: unset;
 }