Update media.md (#443)

Author: LutherTS

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>