embed

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!

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>
 

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

themes/battheme

@@ -1 +1 @@
-Subproject commit 1e0860239be372c6a2acb55334b5b64a19aba726
+Subproject commit 87e50d911af1263b31136cc37954e4a0f619a1d1