From 0ec605d6c1af07cfbdf7df61c08ce0220df97f93 Mon Sep 17 00:00:00 2001
From: Arush <112827565+ArushYadlapati@users.noreply.github.com>
Date: Sun, 7 Jul 2024 22:19:54 -0700
Subject: [PATCH] Removed the annoying youtube popups in the shorts embed,
 attempted to remove side scrolling on safari.

---
 .../complete_trajectorybuilder_reference.md   | 52 +++++++++++++++----
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/roadrunner_10/complete_trajectorybuilder_reference.md b/src/roadrunner_10/complete_trajectorybuilder_reference.md
index e163db6..f221514 100644
--- a/src/roadrunner_10/complete_trajectorybuilder_reference.md
+++ b/src/roadrunner_10/complete_trajectorybuilder_reference.md
@@ -50,14 +50,28 @@ The begin pose is the origin (0,0) with a heading of $\frac{\pi}{6}$.
 ```
 
 <style>
-  .video-container {
-    display: flex;
-    justify-content: center;
-  }
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  background: #000;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
 </style>
 
 <div class="video-container">
-  <iframe width="505" height="650" src="https://www.youtube.com/embed/JuYdXikOhzM" title="waitSeconds()" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  <iframe width="505" height="650" src="https://www.youtube.com/embed/JuYdXikOhzM?rel=0&modestbranding=1" title="waitSeconds()" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
 
 ---
@@ -69,14 +83,30 @@ The begin pose is the origin (0,0) with a heading of $\frac{\pi}{6}$.
 ```
 
 <style>
-  .video-container {
-    display: flex;
-    justify-content: center;
-  }
+    .video-container {
+      display: flex;
+      justify-content: center;
+      position: relative;
+      padding-bottom: 56.25%; /* 16:9 aspect ratio */
+      height: 0;
+      overflow: hidden;
+      max-width: 100%;
+      background: #000;
+      margin-bottom: 20px;
+    }
+
+    .video-container iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
 </style>
 
 <div class="video-container">
-  <iframe width="505" height="650" src="https://www.youtube.com/embed/tTfQ6Diz_GQ" title="turn()" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>  
+  <iframe width="505" height="650" src="https://www.youtube.com/embed/tTfQ6Diz_GQ?rel=0&modestbranding=1" title="turn()" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>  
 </div>
 
 ---
@@ -95,7 +125,7 @@ The begin pose is the origin (0,0) with a heading of $\frac{\pi}{6}$.
 </style>
 
 <div class="video-container">
-  <iframe width="505" height="650" src="https://www.youtube.com/embed/eRQwtMEw4io" title="turnTo()" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  <iframe width="505" height="650" src="https://www.youtube.com/embed/eRQwtMEw4io?rel=0&modestbranding=1" title="turnTo()" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 </div>
 
 ---