docs: add YouTube embed params (#493)

hannesrudolph · web-flow · commit 2bfeef692604 · 2026-01-15T14:59:40.000-07:00
diff --git a/docs/features/api-configuration-profiles.mdx b/docs/features/api-configuration-profiles.mdx
@@ -18,7 +18,7 @@ Having multiple configuration profiles lets you quickly switch between different
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/eEJErgZBqLE"
+    src="https://www.youtube.com/embed/eEJErgZBqLE?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/auto-approving-actions.mdx b/docs/features/auto-approving-actions.mdx
@@ -16,7 +16,7 @@ Auto-approve settings speed up your workflow by eliminating repetitive confirmat
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/bWtIxGsl2cQ"
+    src="https://www.youtube.com/embed/bWtIxGsl2cQ?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/boomerang-tasks.mdx b/docs/features/boomerang-tasks.mdx
@@ -15,7 +15,7 @@ Boomerang Tasks (also known as subtasks or task orchestration) allow you to brea
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/RX862U09fnE"
+    src="https://www.youtube.com/embed/RX862U09fnE?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/browser-use.mdx b/docs/features/browser-use.mdx
@@ -17,7 +17,7 @@ Roo Code provides sophisticated browser automation capabilities that let you int
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/cAjzTs0194c"
+    src="https://www.youtube.com/embed/cAjzTs0194c?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/checkpoints.mdx b/docs/features/checkpoints.mdx
@@ -21,7 +21,7 @@ Checkpoints let you:
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe title="Checkpoints Tutorial Video"
-    src="https://www.youtube.com/embed/Ho30nyY332E"
+    src="https://www.youtube.com/embed/Ho30nyY332E?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/code-actions.mdx b/docs/features/code-actions.mdx
@@ -16,7 +16,7 @@ Code Actions provide instant access to Roo Code's AI assistance directly within
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/_Op3VfLPEu8"
+    src="https://www.youtube.com/embed/_Op3VfLPEu8?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/codebase-indexing.mdx b/docs/features/codebase-indexing.mdx
@@ -18,7 +18,7 @@ Codebase Indexing transforms how Roo Code understands your project by creating a
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/r1bpod1VWhg"
+    src="https://www.youtube.com/embed/r1bpod1VWhg?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/custom-modes.mdx b/docs/features/custom-modes.mdx
@@ -15,7 +15,7 @@ Roo Code allows you to create **custom modes** to tailor Roo's behavior to speci
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/iiAv1eKOaxk"
+    src="https://www.youtube.com/embed/iiAv1eKOaxk?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/intelligent-context-condensing.mdx b/docs/features/intelligent-context-condensing.mdx
@@ -16,7 +16,7 @@ The Intelligent Context Condensing feature helps manage long conversations by su
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/9k8OAXlszak"
+    src="https://www.youtube.com/embed/9k8OAXlszak?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/marketplace.mdx b/docs/features/marketplace.mdx
@@ -14,7 +14,7 @@ import Codicon from '@site/src/components/Codicon';
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/WatooxMlW0U"
+    src="https://www.youtube.com/embed/WatooxMlW0U?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/mcp/using-mcp-in-roo.mdx b/docs/features/mcp/using-mcp-in-roo.mdx
@@ -23,7 +23,7 @@ Model Context Protocol (MCP) extends Roo Code's capabilities by connecting to ex
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/VAbadUDhH5c"
+    src="https://www.youtube.com/embed/VAbadUDhH5c?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/shell-integration.mdx b/docs/features/shell-integration.mdx
@@ -15,7 +15,7 @@ Terminal Shell Integration is a key feature that enables Roo Code to execute com
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/rkWBHeG9A-4"
+    src="https://www.youtube.com/embed/rkWBHeG9A-4?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/skills.mdx b/docs/features/skills.mdx
@@ -15,7 +15,7 @@ Skills package task-specific instructions that Roo loads on-demand when your req
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/cK2CBU54bhw"
+    src="https://www.youtube.com/embed/cK2CBU54bhw?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/slash-commands.mdx b/docs/features/slash-commands.mdx
@@ -16,7 +16,7 @@ Create custom slash commands to automate repetitive tasks and extend Roo Code's
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/IOpmeUGLpg0"
+    src="https://www.youtube.com/embed/IOpmeUGLpg0?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/features/task-todo-list.mdx b/docs/features/task-todo-list.mdx
@@ -22,7 +22,7 @@ See [When Roo Creates Todo Lists](#when-roo-creates-todo-lists) for detailed inf
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/6h5vB9PpoPk"
+    src="https://www.youtube.com/embed/6h5vB9PpoPk?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/getting-started/installing.mdx b/docs/getting-started/installing.mdx
@@ -15,7 +15,7 @@ import KangarooIcon from '@site/src/components/KangarooIcon';
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/Mcq3r1EPZ-4"
+    src="https://www.youtube.com/embed/Mcq3r1EPZ-4?rel=0&modestbranding=1"
     style={{
       position: 'absolute',
       top: 0,
diff --git a/docs/providers/openai-chatgpt-plus-pro.md b/docs/providers/openai-chatgpt-plus-pro.md
@@ -14,7 +14,7 @@ keywords:
 
 <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
   <iframe
-    src="https://www.youtube.com/embed/c1IXRMl5i0g"
+    src="https://www.youtube.com/embed/c1IXRMl5i0g?rel=0&modestbranding=1"
     title="OpenAI – ChatGPT Plus/Pro provider setup"
     style={{
       position: 'absolute',
diff --git a/docs/update-notes/v3.18.0.mdx b/docs/update-notes/v3.18.0.mdx
@@ -15,7 +15,7 @@ Watch a quick overview:
 <div style={{width: '50%', margin: 'auto'}}>
   <div style={{position: 'relative', paddingBottom: '177.77%', height: 0, overflow: 'hidden'}}>
     <iframe
-      src="https://www.youtube.com/embed/o5xgO9N8vVU"
+      src="https://www.youtube.com/embed/o5xgO9N8vVU?rel=0&modestbranding=1"
       title="YouTube Short"
       frameBorder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/docs/update-notes/v3.18.mdx b/docs/update-notes/v3.18.mdx
@@ -41,7 +41,7 @@ Watch a quick overview:
 <div style={{width: '50%', margin: 'auto'}}>
   <div style={{position: 'relative', paddingBottom: '177.77%', height: 0, overflow: 'hidden'}}>
     <iframe
-      src="https://www.youtube.com/embed/o5xgO9N8vVU"
+      src="https://www.youtube.com/embed/o5xgO9N8vVU?rel=0&modestbranding=1"
       title="YouTube Short"
       frameBorder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/src/components/VideoGrid.tsx b/src/components/VideoGrid.tsx
@@ -76,7 +76,7 @@ export default function VideoGrid(): React.JSX.Element {
             className="video-container"
             onClick={(e) => {
               const target = e.currentTarget;
-              target.innerHTML = `<iframe src='https://www.youtube.com/embed/${video.id}?autoplay=1' title='${video.title}' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowFullScreen></iframe>`;
+              target.innerHTML = `<iframe src='https://www.youtube.com/embed/${video.id}?autoplay=1&rel=0&modestbranding=1' title='${video.title}' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowFullScreen></iframe>`;
             }}
           >
             <img
