angular · erkamyaman · Jun 10, 2026
diff --git a/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts b/adev/shared-docs/components/viewers/docs-viewer/docs-viewer.component.ts
@@ -31,7 +31,7 @@ import {Router} from '@angular/router';
 import {fromEvent} from 'rxjs';
 import {Snippet} from '../../../interfaces';
 import {NavigationState, TOC_SKIP_CONTENT_MARKER} from '../../../services';
-import {handleHrefClickEventWithRouter} from '../../../utils';
+import {handleHrefClickEventWithRouter, isFirefox} from '../../../utils';
 import {IconComponent} from '../../icon/icon.component';
 import {TableOfContents} from '../../table-of-contents/table-of-contents.component';
 
@@ -124,6 +124,7 @@ export class DocViewer {
       // In case when content contains tabs, create tabs component and move
       // content in a tab into tab panel.
       this.constructTabs(contentContainer);
+      this.setupVideoFacades(contentContainer);
     }
 
     // Display Breadcrumb component if the `<docs-breadcrumb>` element exists
@@ -412,4 +413,36 @@ export class DocViewer {
       tabGroup.parentElement!.replaceChild(tabGroupRef.location.nativeElement, tabGroup);
     }
   }
+
+  private setupVideoFacades(element: HTMLElement): void {
+    const facades = element.querySelectorAll<HTMLAnchorElement>('a.docs-video-facade');
+
+    for (const facade of Array.from(facades)) {
+      const src = facade.getAttribute('data-video-src');
+      if (!src) {
+        continue;
+      }
+
+      if (isFirefox) {
+        const thumbnail = facade.querySelector<HTMLImageElement>('img.docs-video-thumbnail');
+        thumbnail?.addEventListener(
+          'error',
+          () => {
+            thumbnail.src = thumbnail.src.replace('maxresdefault', 'hqdefault');
+          },
+          {once: true},
+        );
+        continue;
+      }
+
+      const iframe = this.document.createElement('iframe');
+      iframe.className = 'docs-video';
+      iframe.src = src;
+      iframe.title = facade.getAttribute('data-video-title') ?? 'Video player';
+      iframe.setAttribute('allow', 'accelerometer; encrypted-media; gyroscope; picture-in-picture');
+      iframe.setAttribute('allowfullscreen', '');
+      iframe.setAttribute('credentialless', '');
+      facade.replaceWith(iframe);
+    }
+  }
 }
diff --git a/adev/shared-docs/pipeline/shared/marked/extensions/docs-video.mts b/adev/shared-docs/pipeline/shared/marked/extensions/docs-video.mts
@@ -53,17 +53,33 @@ export const docsVideoExtension = {
       );
     }
 
+    const videoId = /\/embed\/([^/?#]+)/.exec(token.src)?.[1];
+    const watchUrl = videoId ? `https://www.youtube.com/watch?v=${videoId}&autoplay=1` : token.src;
+    const thumbnail = videoId ? `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg` : '';
+    const label = token.title ? `Play video: ${token.title}` : 'Play video';
+
     return `
     <div class="docs-video-container">
-      <iframe
-      class="docs-video"
-      src="${token.src}"
-      ${token.title ? `title="${token.title}"` : ''}
-      allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
-      allowfullscreen
-      credentialless
-      title="Video player"
-      ></iframe>
+      <a
+        class="docs-video-facade"
+        href="${watchUrl}"
+        target="_blank"
+        rel="noopener"
+        aria-label="${label}"
+        data-video-src="${token.src}"
+        ${token.title ? `data-video-title="${token.title}"` : ''}
+      >
+        <img class="docs-video-thumbnail" src="${thumbnail}" alt="" loading="lazy" />
+        <span class="docs-video-play-button" aria-hidden="true">
+          <svg viewBox="0 0 68 48" width="68" height="48">
+            <path
+              class="docs-video-play-button-bg"
+              d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z"
+            />
+            <path d="M45 24 27 14v20z" fill="#fff" />
+          </svg>
+        </span>
+      </a>
     </div>
     `;
   },

diff --git a/adev/shared-docs/pipeline/shared/marked/test/docs-video/docs-video.spec.mts b/adev/shared-docs/pipeline/shared/marked/test/docs-video/docs-video.spec.mts
@@ -20,15 +20,20 @@ describe('markdown to html', () => {
     markdownDocument = JSDOM.fragment(await parseMarkdown(markdownContent, rendererContext));
   });
 
-  it('should create an iframe in a container', () => {
+  it('should create a video facade in a container', () => {
     const videoContainerEl = markdownDocument.querySelector('.docs-video-container')!;
-    const iframeEl = videoContainerEl.children[0];
+    const facadeEl = videoContainerEl.children[0];
 
     expect(videoContainerEl.children.length).toBe(1);
 
-    expect(iframeEl.nodeName).toBe('IFRAME');
-    expect(iframeEl.getAttribute('src')).toBeTruthy();
-    expect(iframeEl.classList.contains('docs-video')).toBeTrue();
-    expect(iframeEl.getAttribute('title')).toBeTruthy();
+    expect(facadeEl.nodeName).toBe('A');
+    expect(facadeEl.classList.contains('docs-video-facade')).toBeTrue();
+    expect(facadeEl.getAttribute('href')).toContain('youtube.com/watch?v=');
+    expect(facadeEl.getAttribute('data-video-src')).toBeTruthy();
+
+    const thumbnailEl = facadeEl.querySelector('img.docs-video-thumbnail');
+    expect(thumbnailEl?.getAttribute('src')).toContain('i.ytimg.com');
+
+    expect(facadeEl.querySelector('.docs-video-play-button')).toBeTruthy();
   });
 });
diff --git a/adev/shared-docs/styles/docs/_video.scss b/adev/shared-docs/styles/docs/_video.scss
@@ -7,5 +7,48 @@
       overflow: hidden;
       aspect-ratio: 16 / 9;
     }
+
+    .docs-video-facade {
+      position: relative;
+      display: block;
+      width: 100%;
+      aspect-ratio: 16 / 9;
+      border-radius: 0.25rem;
+      overflow: hidden;
+      cursor: pointer;
+    }
+
+    .docs-video-thumbnail {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      object-fit: cover;
+      display: block;
+    }
+
+    .docs-video-play-button {
+      position: absolute;
+      inset: 0;
+      margin: auto;
+      width: 68px;
+      height: 48px;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      .docs-video-play-button-bg {
+        fill: #212121;
+        fill-opacity: 0.8;
+        transition: fill-opacity 0.2s ease;
+      }
+    }
+
+    .docs-video-facade:hover .docs-video-play-button-bg,
+    .docs-video-facade:focus-visible .docs-video-play-button-bg {
+      fill: #f00;
+      fill-opacity: 1;
+    }
   }
 }