embed

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!

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">}}

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); }