docs(community): add ADK tutorial videos (#233)

Co-authored-by: Kristopher Overholt <[email protected]>

Author: Sita04

docs/community.md

@@ -26,7 +26,33 @@ integrations here.*
 
 ## Videos & Screencasts
 
-*Discover video walkthroughs, talks, and demos showcasing ADK.*
+Discover video walkthroughs, talks, and demos showcasing ADK.
+
+<div class="video-grid">
+  <div class="video-item">
+    <div class="video-container">
+      <iframe src="https://www.youtube-nocookie.com/embed/zgrOwow_uTQ?si=1xVxuZyW022Rq5ZC" 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>
+  </div>
+
+  <div class="video-item">
+    <div class="video-container">
+      <iframe src="https://www.youtube-nocookie.com/embed/44C8u0CDtSo?si=EkZu_m5O-fQPzORk" 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>
+  </div>
+
+  <div class="video-item">
+    <div class="video-container">
+      <iframe src="https://www.youtube-nocookie.com/embed/efcUXoMX818?si=Dwez2zH8OSwf7Ktg" 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>
+  </div>
+
+  <div class="video-item">
+    <div class="video-container">
+      <iframe src="https://www.youtube-nocookie.com/embed/hPzjkQFV5yI?si=GNbDQ1iqP4fok-SY" 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>
+  </div>
+</div>
 
 *   **[Agent Development Kit (ADK) Masterclass: Build AI Agents & Automate Workflows (Beginner to Pro)](https://www.youtube.com/watch?v=P4VFL9nIaIA)**
 

docs/index.md

@@ -40,6 +40,8 @@ from simple tasks to complex workflows.
 
 ## Learn more
 
+[:fontawesome-brands-youtube:{.youtube-red-icon} Watch "Introducing Agent Development Kit"!](https://www.youtube.com/watch?v=zgrOwow_uTQ target="_blank" rel="noopener noreferrer")
+
 <div class="grid cards" markdown>
 
 -   :material-transit-connection-variant: **Flexible Orchestration**

docs/stylesheets/custom.css

@@ -24,3 +24,14 @@
 .install-command-container { max-width: 600px; margin: 2.5em auto; padding: 1.5em 2em; background-color: var(--md-code-bg-color, #f5f5f5); border-radius: 8px; text-align: center; box-shadow: 0 3px 6px rgba(0,0,0,0.05); border-left: 5px solid var(--md-primary-fg-color, #526cfe); margin-top: 30px; }
 .install-command-container p { font-size: 1.1em; color: var(--md-default-fg-color); margin-bottom: -10px; margin-top: -10px; }
 .install-command-container p code { font-size: 1.1em; font-weight: 600; padding: 0.3em 0.6em; background-color: var(--md-code-fg-color--light); border-radius: 4px; display: inline-block; line-height: 1.4; }
+
+/* Youtube Video Grid Layout - Community page*/
+.video-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 1.5em; margin-bottom: 1.5em; }
+/* For 3 items per row: 100% / 3 = 33.333% */
+.video-item { flex: 0 1 calc(33.333% - 13.333px); box-sizing: border-box; min-width: 250px; }
+.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #f0f0f0; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
+.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
+@media (max-width: 992px) {  .video-item { flex: 0 1 calc(50% - 10px); }  }
+@media (max-width: 600px) {  .video-item { flex: 0 1 100%; }  }
+/* Youtube icon */
+.youtube-red-icon svg { fill: #FF0000 !important; }