From 5dc0510c8a9526a9450248c4d9721a31286cf03c Mon Sep 17 00:00:00 2001
From: Zev Averbach <zev@averba.ch>
Date: Mon, 12 Jun 2023 10:38:36 +0200
Subject: [PATCH] oops

---
 ...-makes-an-ugly-website-in-100-seconds.html | 58 +++++++++++++++----
 1 file changed, 46 insertions(+), 12 deletions(-)
diff --git a/1/baby-makes-an-ugly-website-in-100-seconds.html b/1/baby-makes-an-ugly-website-in-100-seconds.html
index c54c7f9..165cf03 100644
--- a/1/baby-makes-an-ugly-website-in-100-seconds.html
+++ b/1/baby-makes-an-ugly-website-in-100-seconds.html
@@ -1,18 +1,52 @@
 <!doctype html>
 <html>
-  <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js" integrity="sha512-SYfDUYPg5xspsG6OOpXU366G8SZsdHOhqk/icdrYJ2E/WKZxPxze7d2HD3AyXpT7U22PZ5y74xRpqZ6A2bJ+kQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-  </head>
-  <body>
+<head>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.min.js" integrity="sha512-SYfDUYPg5xspsG6OOpXU366G8SZsdHOhqk/icdrYJ2E/WKZxPxze7d2HD3AyXpT7U22PZ5y74xRpqZ6A2bJ+kQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f0f0f0;
+    }
+    .container {
+      margin: 0 auto;
+      max-width: 900px;
+      padding: 20px;
+      background-color: #fff;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+    h1 {
+      color: #333;
+    }
+    .video-wrapper {
+      position: relative;
+      padding-bottom: 56.25%; /* 16:9 aspect ratio */
+      height: 0;
+      overflow: hidden;
+    }
+    .video-wrapper iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
     <script>
-    const md = window.markdownit({linkify: true, html: true});
-    const result = md.render(`
-# Testing In-Browser Markdown Rendering And YouTube Embed
-
-<iframe width="560" height="315" src="https://www.youtube.com/embed/QJ38en58Onk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-`);
-    document.body.insertAdjacentHTML("beforeend", result);
+      const md = window.markdownit({linkify: true, html: true});
+      const result = md.render(`
+        # Testing In-Browser Markdown Rendering And YouTube Embed
+      `);
+      document.body.insertAdjacentHTML("beforeend", result);
     </script>
-  </body>
+    <div class="video-wrapper">
+      <iframe src="https://www.youtube.com/embed/QJ38en58Onk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+    </div>
+  </div>
+</body>
 </html>
 
