From d836ca5a2bac92b18f254e0c6ef731e2e0b48aa9 Mon Sep 17 00:00:00 2001
From: Rex Cheng <hkchengrex@gmail.com>
Date: Sat, 7 Dec 2024 01:56:51 -0600
Subject: [PATCH] update webpage

---
 docs/index.html | 13 +++++--------
 docs/style.css  | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 4d839d6..155aa04 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,6 +16,8 @@
     <meta charset="UTF-8">
     <title>MMAudio</title>
 
+    <link rel="icon" type="image/png" href="images/icon.png">
+
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- CSS only -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
@@ -130,14 +132,9 @@
                 </div>
             </div>
             <br>
-            <div style="text-align: center;">
-                <video style="width: 100%" controls>
-                    <source
-                        src="./videos/demo.mp4"
-                        type="video/mp4">
-                    Your browser does not support the video tag.
-                </video>
-            </div>
+            <div class="video-container" style="text-align: center;">
+                <iframe src="https://youtube.com/embed/YElewUT2M4M"></iframe>
+                </div>
 
             <br>
     
diff --git a/docs/style.css b/docs/style.css
index 10b3fcf..4946ef1 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -61,4 +61,18 @@ hr {
     border: 0;
     height: 1px;
     background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
+
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+  }
+  
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file