Added mp4

SijmenHuizenga · Oct 29, 2023 · 146a430 · 146a430
1 parent fca7d13
commit 146a430
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/webapp/public/gola.mp4 b/webapp/public/gola.mp4
diff --git a/webapp/src/components/MusicPage.tsx b/webapp/src/components/MusicPage.tsx
@@ -6,9 +6,12 @@ const MusicPage = () => {
     <RoomWrapper
       style={{
         background: "url(/basel.jpg)",
-        backgroundPosition: "center", /* Center the image */
-        backgroundRepeat: "no-repeat", /* Do not repeat the image */
-        backgroundSize: "cover", /* Resize the background image to cover the entire container */
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
       }}
     >
       <div
@@ -17,15 +20,20 @@ const MusicPage = () => {
           maxWidth: "66rem",
         }}
       >
-        <h1 className="text-7xl font-semibold uppercase font-title p-3 pb-0 text-white">
-          Musik Hits 2000
-        </h1>
-        <h1 className="text-3xl mb-4 p-3 pt-0 text-white">
-          Player
-        </h1>
-         <iframe width="420" height="315"
-          src="https://www.youtube.com/embed/qsQzOtFHMWE?autoplay=1">
-        </iframe>
+        <div className="absolute top-10">
+          <h1 className="text-7xl font-semibold uppercase font-title p-3 pb-0 text-white">
+            Musik Hits 2000
+          </h1>
+          <h1 className="text-3xl mb-4 p-3 pt-0 text-white">
+            Player
+          </h1>
+        </div>
+        <div className="absolute bottom-9">
+          <audio controls>
+            <source src="gola.mp4" type="audio/ogg" />
+            <source src="gola.mp4" type="audio/mpeg" />
+          </audio>
+        </div>
       </div>
     </RoomWrapper>
   );