Update 2 files

- /docs/README.md
- /docs/.vuepress/styles/index.scss

docs/.vuepress/styles/index.scss

@@ -7,4 +7,25 @@ h1, h2, h3, h4, h5, h6, p, a, span, strong {
   strong, b {
     font-family: 'Red Hat Display', sans-serif;
     font-weight: 700; /* or whatever weight you prefer */
-  }
\ No newline at end of file
+  }
+
+  .video-wrapper {
+    display: flex;
+    justify-content: center; /* Centers the video horizontally */
+    align-items: center;     /* Centers the video vertically (if necessary) */
+    position: relative;
+    width: 100%;
+    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%;
+    border: 0; /* Optional: removes the iframe border */
+  }
+  
\ No newline at end of file

docs/README.md

@@ -53,7 +53,10 @@ footer: true
     </ul>
   </div>
 </div>
-<div class="video-container">
-  <iframe title="MSP-Maastricht: Natronaut - Turning the Tide Against Coastal Eutrophication! (2024) - Project Promotion [English]" src="https://video.igem.org/videos/embed/4433d43e-ed40-44d2-ab56-bda202561712?start=0s" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
+<div class="video-wrapper">
+  <iframe title="MSP-Maastricht: Natronaut - Turning the Tide Against Coastal Eutrophication! (2024) - Project Promotion [English]" 
+    src="https://video.igem.org/videos/embed/4433d43e-ed40-44d2-ab56-bda202561712?start=0s" 
+    frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
+  </iframe>
 </div>