diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
index cfeeca3705d08891b64937bc3e9599c6f4b41c9f..7d65bf02ce0c89f6e69a806153fe4561583f697a 100644
--- a/docs/.vuepress/styles/index.scss
+++ b/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
diff --git a/docs/README.md b/docs/README.md
index 76bf92b16529e3f8f60c9c873cc921cf24c2b0e6..1c927f7b27e1b7bba485ed3e2d4120d18876b2f5 100644
--- a/docs/README.md
+++ b/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>