diff --git a/content/games/trainyard-trouble.md b/content/games/trainyard-trouble.md
index 6d34ae4..46bb585 100644
--- a/content/games/trainyard-trouble.md
+++ b/content/games/trainyard-trouble.md
@@ -9,7 +9,7 @@ description: "cargo management game"
 
 [tess](/links/buddies#tess) and i also made this game for a game jam!
 you manage a cargo train terminal with three trains and your goal is to survive as long as you can without the storage area overflowing
-{{<youtube vBq0aBTBh8s>}}
+{{<youtube class="embed" id="vBq0aBTBh8s">}}
 
 we made this for a [godot wildjam](https://godotwildjam.com/) and it was a bit messy!
 the plan was to try out godot 4, which was in alpha 4 at that point, and most of the things worked fine until we tried to export the game... the macos version had sound, but no video, the windows version had video but no sound, but the linux version worked fine so that's great!
diff --git a/content/links/nice_things.md b/content/links/nice_things.md
index 31f222e..7aefe72 100644
--- a/content/links/nice_things.md
+++ b/content/links/nice_things.md
@@ -13,4 +13,4 @@ description: "this is a list of very good things"
 ## videos
 ### a whole tray of peas
 she just eats the entire tray of peas!!! impressive!
-the raw energy of this is just amazing {{<youtube HWcKcUn7e-8>}}
+the raw energy of this is just amazing {{<youtube id="HWcKcUn7e-8" class="embed">}}
diff --git a/public/games/trainyard-trouble/index.html b/public/games/trainyard-trouble/index.html
index e45812d..5583dbd 100644
--- a/public/games/trainyard-trouble/index.html
+++ b/public/games/trainyard-trouble/index.html
@@ -20,8 +20,8 @@
 <p><a href="/links/buddies#tess">tess</a> and i also made this game for a game jam!
 you manage a cargo train terminal with three trains and your goal is to survive as long as you can without the storage area overflowing
 
-<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
-  <iframe src="https://www.youtube.com/embed/vBq0aBTBh8s" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
+<div class="embed">
+  <iframe src="https://www.youtube.com/embed/vBq0aBTBh8s" allowfullscreen title="YouTube Video"></iframe>
 </div>
 </p>
 <p>we made this for a <a href="https://godotwildjam.com/">godot wildjam</a> and it was a bit messy!
diff --git a/public/links/nice_things/index.html b/public/links/nice_things/index.html
index b3b0f16..3127001 100644
--- a/public/links/nice_things/index.html
+++ b/public/links/nice_things/index.html
@@ -34,8 +34,8 @@
 </h3>
 <p>she just eats the entire tray of peas!!! impressive!
 the raw energy of this is just amazing 
-<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
-  <iframe src="https://www.youtube.com/embed/HWcKcUn7e-8" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
+<div class="embed">
+  <iframe src="https://www.youtube.com/embed/HWcKcUn7e-8" allowfullscreen title="YouTube Video"></iframe>
 </div>
 </p>
 
diff --git a/public/scss/main.css b/public/scss/main.css
index 561eedc..c23aecc 100644
--- a/public/scss/main.css
+++ b/public/scss/main.css
@@ -265,7 +265,7 @@ footer {
 #content ul,
 #content ol,
 #content table,
-#content iframe,
+.embed,
 code,
 .postdescription,
 hr,
@@ -273,12 +273,20 @@ hr,
   margin-right: 24%;
   margin-left: 24%; }
 
-#content img,
-#content iframe {
+#content img {
   display: block;
   overflow: hidden;
   max-width: 52%;
-  max-height: 100%; }
+  height: 100%; }
+
+#content .embed {
+  display: block;
+  overflow: hidden;
+  padding: 0; }
+  #content .embed iframe {
+    width: 100%;
+    aspect-ratio: 16/9;
+    margin: 0; }
 
 p code {
   margin-left: 0;
@@ -459,7 +467,7 @@ input[type="checkbox"] {
   align-items: center;
   display: flex; }
 
-img {
+img, iframe {
   border-style: solid; }
 
 .togglelabel::after {
@@ -478,7 +486,8 @@ img {
   align-items: center;
   justify-content: center;
   content: "";
-  border-style: solid; }
+  border-style: solid;
+  padding: 0; }
 
 input:checked + label:after {
   left: calc(100% - 49pt); }
diff --git a/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 561eedc..c23aecc 100644
--- a/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -265,7 +265,7 @@ footer {
 #content ul,
 #content ol,
 #content table,
-#content iframe,
+.embed,
 code,
 .postdescription,
 hr,
@@ -273,12 +273,20 @@ hr,
   margin-right: 24%;
   margin-left: 24%; }
 
-#content img,
-#content iframe {
+#content img {
   display: block;
   overflow: hidden;
   max-width: 52%;
-  max-height: 100%; }
+  height: 100%; }
+
+#content .embed {
+  display: block;
+  overflow: hidden;
+  padding: 0; }
+  #content .embed iframe {
+    width: 100%;
+    aspect-ratio: 16/9;
+    margin: 0; }
 
 p code {
   margin-left: 0;
@@ -459,7 +467,7 @@ input[type="checkbox"] {
   align-items: center;
   display: flex; }
 
-img {
+img, iframe {
   border-style: solid; }
 
 .togglelabel::after {
@@ -478,7 +486,8 @@ img {
   align-items: center;
   justify-content: center;
   content: "";
-  border-style: solid; }
+  border-style: solid;
+  padding: 0; }
 
 input:checked + label:after {
   left: calc(100% - 49pt); }
diff --git a/themes/battheme b/themes/battheme
index 1e08602..87e50d9 160000
--- a/themes/battheme
+++ b/themes/battheme
@@ -1 +1 @@
-Subproject commit 1e0860239be372c6a2acb55334b5b64a19aba726
+Subproject commit 87e50d911af1263b31136cc37954e4a0f619a1d1