diff --git a/src/docs/guide/media.md b/src/docs/guide/media.md
index 980994ab6d..b5b72bd7e8 100644
--- a/src/docs/guide/media.md
+++ b/src/docs/guide/media.md
@@ -12,14 +12,41 @@ outline: deep
 
 ## Videos
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/OMPTdaD7Zpo?si=Rs8eRhwjUvrGZS_J" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
+  <iframe
+    src="https://www.youtube.com/embed/OMPTdaD7Zpo?si=Rs8eRhwjUvrGZS_J"
+    style="position: absolute; top:0; left: 0; width: 100%; height: 100%;"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>
 
 <br />
 <br />
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/IjV0tLysXc0?si=EOoUSH55tk7pJgpQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
+  <iframe
+    src="https://www.youtube.com/embed/IjV0tLysXc0?si=EOoUSH55tk7pJgpQ"
+    style="position: absolute; top:0; left: 0; width: 100%; height: 100%;"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>
 
 <br />
 <br />
 
-<iframe width="560" height="315" src="https://www.youtube.com/embed/7VctnNVXe2A?si=3laDGbv4vNVbgvsg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
+  <iframe
+    src="https://www.youtube.com/embed/7VctnNVXe2A?si=3laDGbv4vNVbgvsg"
+    style="position: absolute; top:0; left: 0; width: 100%; height: 100%;"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen
+  ></iframe>
+</div>