attempting dynamic mp4 size for background

aleatorydialogue · Jun 29, 2024 · a2423a9 · a2423a9
1 parent 4d8999f
commit a2423a9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@
         </button>
         <div class="dropdown-content">
           <a href="consulting/index.html" target="_blank">Consulting</a>
+          <a href="cells.html" target="_blank">Cellular Automata</a>
           <div class="submenu-link">
             <a target="_blank">Gaussian Splats</a>
             <div class="submenu-content">
@@ -46,10 +47,9 @@
       </nav>
     </div>
   </footer>
-  <video autoplay muted loop id="bgVideo">
+  <video autoplay muted loop id="bgVideo" playsinline>
     <source src="backgrounds/2.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>
-
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -7,6 +7,8 @@ body {
   padding: 0;
   background: none; /* Remove static background image */
   background-size: cover;
+  overflow: hidden; /* Prevent scrolling */
+  height: 100vh; /* Ensure body takes up full viewport height */
 }
 
 #bgVideo {
@@ -23,6 +25,24 @@ body {
   overflow: hidden;
 }
 
+@media (max-width: 768px) {
+  #bgVideo {
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+  }
+}
+
+@media (max-width: 480px) {
+  #bgVideo {
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+  }
+}
+
 header {
   background-color: rgba(0, 0, 0, 0.8);
   color: white;