Spaces:

CosmoAI
/

CosmoS

Sleeping

CosmoAI commited on Aug 27, 2023

Commit

58479ec

1 Parent(s): f4dd738

Update app.py

Files changed (1) hide show

app.py CHANGED Viewed

@@ -3,43 +3,37 @@ import streamlit as st
 # Add a custom CSS style for the background video and centered button
 st.markdown(
     """
-    <style>
-    .fullscreen-bg {
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        overflow: hidden;
-        z-index: -1;
-    }
-    .fullscreen-bg video,
-    .fullscreen-bg img {
-        width: 100%;
-        height: auto;
-    }
-    .centered-button {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 1;
-    }
-    </style>
     """,
     unsafe_allow_html=True
 )
-# Add the background video or GIF
-st.markdown(
-    """
-    <div class="fullscreen-bg">
-        <video loop muted autoplay playsinline>
-            <source src="universe.mp4" type="video/mp4">
-            Your browser does not support the video tag.
-        </video>
-        <button class="centered-button">Explore Infinite</button>
-    </div>
-    """,
-    unsafe_allow_html=True
-)

 # Add a custom CSS style for the background video and centered button
 st.markdown(
     """
+    <html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  video {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    z-index: -1;
+  }
+</style>
+<title>Fullscreen Video Example</title>
+</head>
+<body>
+<video autoplay loop muted playsinline>
+  <source src="universe.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+</body>
+</html>
     """,
     unsafe_allow_html=True
 )