Merge branch 'feature/element-youtube-link'

backend/app/Controllers/ElementController.php

@@ -48,6 +48,7 @@ class ElementController
                 'description' => $element->getDescription(),
                 'richText' => $element->getRichText(),
                 'pdfPath' => $element->getPdfPath(),
+                'youtubeUrl' => $element->getYoutubeUrl(),
             ],
         ], 200);
     }

backend/app/Element/CreateElementDto.php

@@ -12,6 +12,7 @@ class CreateElementDto
         public string $description,
         public string $richText,
         public ?string $pdfPath,
+        public ?string $youtubeUrl,
         public ?Element $parentElement,
     ) {
     }

backend/app/Element/Element.php

@@ -12,6 +12,7 @@ class Element
         private string $description,
         private string $richText,
         private ?string $pdfPath,
+        private ?string $youtubeUrl,
         private Set $set,
         private ?Element $parentElement,
     ) {
@@ -42,6 +43,11 @@ class Element
         return $this->pdfPath;
     }
 
+    public function getYoutubeUrl(): ?string
+    {
+        return $this->youtubeUrl;
+    }
+
     public function getSet(): Set
     {
         return $this->set;

backend/app/Element/ElementModel.php

@@ -12,6 +12,7 @@ use Illuminate\Database\Eloquent\Model;
  * @property string $description
  * @property string $rich_text
  * @property string|null $pdf_path
+ * @property string|null $youtube_url
  * @property int|null $parent_element_id
  *
  * @method static Builder<static>|ElementModel newModelQuery()
@@ -24,6 +25,7 @@ use Illuminate\Database\Eloquent\Model;
  * @method static Builder<static>|ElementModel whereDescription($value)
  * @method static Builder<static>|ElementModel whereRichText($value)
  * @method static Builder<static>|ElementModel wherePdfPath($value)
+ * @method static Builder<static>|ElementModel whereYoutubeUrl($value)
  *
  * @mixin \Eloquent
  */
@@ -39,6 +41,7 @@ class ElementModel extends Model
         'description',
         'rich_text',
         'pdf_path',
+        'youtube_url',
         'parent_element_id',
     ];
 

backend/app/Element/EloquentElementRepository.php

@@ -20,6 +20,7 @@ class EloquentElementRepository implements ElementRepository
             'description' => $dto->description,
             'rich_text' => $dto->richText,
             'pdf_path' => $dto->pdfPath,
+            'youtube_url' => $dto->youtubeUrl,
             'parent_element_id' => $dto->parentElement?->getId(),
         ]);
 
@@ -29,6 +30,7 @@ class EloquentElementRepository implements ElementRepository
             description: $dto->description,
             richText: $dto->richText,
             pdfPath: $dto->pdfPath,
+            youtubeUrl: $dto->youtubeUrl,
             set: $dto->set,
             parentElement: $dto->parentElement,
         );
@@ -111,6 +113,7 @@ class EloquentElementRepository implements ElementRepository
             description: $model->description,
             richText: $model->rich_text,
             pdfPath: $model->pdf_path,
+            youtubeUrl: $model->youtube_url,
             set: $set,
             parentElement: $parentElement,
         );

backend/app/Element/UseCases/CreateElement/CreateElement.php

@@ -33,6 +33,9 @@ class CreateElement
         $description = $request->description ?? '';
         $richText = $request->richText ?? '';
         $pdfPath = $request->pdfPath === '' ? null : $request->pdfPath;
+        $youtubeUrl = $request->youtubeUrl === ''
+            ? null
+            : $request->youtubeUrl;
 
         $set = $this->setRepo->find($request->setId);
         if ($set === null) {
@@ -50,6 +53,7 @@ class CreateElement
                 description: $description,
                 richText: $richText,
                 pdfPath: $pdfPath,
+                youtubeUrl: $youtubeUrl,
                 parentElement: null,
             ));
         }
@@ -74,6 +78,7 @@ class CreateElement
             description: $description,
             richText: $richText,
             pdfPath: $pdfPath,
+            youtubeUrl: $youtubeUrl,
             parentElement: $parentElement,
         ));
     }

backend/app/Element/UseCases/CreateElement/CreateElementRequest.php

@@ -10,6 +10,7 @@ class CreateElementRequest
         public ?string $description,
         public ?string $richText,
         public ?string $pdfPath,
+        public ?string $youtubeUrl,
         public ?int $parentElementId,
     ) {
     }

backend/database/migrations/2026_05_24_000001_elements_table.php

@@ -15,6 +15,7 @@ return new class extends Migration
             $table->text('description')->default('');
             $table->text('rich_text')->default('');
             $table->string('pdf_path')->nullable();
+            $table->string('youtube_url')->nullable();
             $table->foreignId('parent_element_id')
                 ->nullable()
                 ->constrained('elements');

backend/database/seeders/ElementSeeder.php

@@ -22,6 +22,8 @@ class ElementSeeder extends Seeder
                 . '<p><strong>Move steadily</strong> from awareness '
                 . 'to practice.</p>',
             pdfPath: '/assets/pdfs/baderech.pdf',
+            youtubeUrl: 'https://www.youtube.com/watch?v='
+                . 'yHx-r4p6hHU&t=1s',
             parentElement: null,
         ));
         $elementRepository->create(new CreateElementDto(
@@ -32,6 +34,7 @@ class ElementSeeder extends Seeder
             richText: '<p>Avodah foundations begin with honest awareness '
                 . 'and small repeatable steps.</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElement: $rootElement,
         ));
         $elementRepository->create(new CreateElementDto(
@@ -41,6 +44,7 @@ class ElementSeeder extends Seeder
             richText: '<p>Daily practice turns inspiration into a '
                 . 'dependable rhythm.</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElement: $rootElement,
         ));
     }

backend/tests/Fakes/FakeElementRepository.php

@@ -23,6 +23,7 @@ class FakeElementRepository implements ElementRepository
             description: $dto->description,
             richText: $dto->richText,
             pdfPath: $dto->pdfPath,
+            youtubeUrl: $dto->youtubeUrl,
             set: $dto->set,
             parentElement: $dto->parentElement,
         );
@@ -101,6 +102,7 @@ class FakeElementRepository implements ElementRepository
             description: $element->getDescription(),
             richText: $element->getRichText(),
             pdfPath: $element->getPdfPath(),
+            youtubeUrl: $element->getYoutubeUrl(),
             set: $element->getSet(),
             parentElement: $parentElement,
         );

backend/tests/Feature/ElementsEndpointTest.php

@@ -15,6 +15,8 @@ class ElementsEndpointTest extends TestCase
 
     public function testReturnsElementTitle(): void
     {
+        $sampleYoutubeUrl = 'https://www.youtube.com/watch?v='
+            . 'yHx-r4p6hHU&t=1s';
         $setRepository = app(SetRepository::class);
         $elementRepository = app(ElementRepository::class);
         $set = $setRepository->create(new CreateSetDto(
@@ -28,6 +30,7 @@ class ElementsEndpointTest extends TestCase
             description: 'A structured path for growth',
             richText: '<p>A structured path for growth</p>',
             pdfPath: '/assets/pdfs/baderech.pdf',
+            youtubeUrl: $sampleYoutubeUrl,
             parentElement: null,
         ));
         $firstChildElement = $elementRepository->create(new CreateElementDto(
@@ -36,6 +39,7 @@ class ElementsEndpointTest extends TestCase
             description: 'Foundations for steady avodah',
             richText: '<p>Foundations rich text</p>',
             pdfPath: '/assets/pdfs/foundations.pdf',
+            youtubeUrl: null,
             parentElement: $element,
         ));
         $secondChildElement = $elementRepository->create(new CreateElementDto(
@@ -44,6 +48,7 @@ class ElementsEndpointTest extends TestCase
             description: 'Daily practices for growth',
             richText: '<p>Daily practice rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElement: $element,
         ));
 
@@ -69,6 +74,7 @@ class ElementsEndpointTest extends TestCase
                 'description' => 'A structured path for growth',
                 'richText' => '<p>A structured path for growth</p>',
                 'pdfPath' => '/assets/pdfs/baderech.pdf',
+                'youtubeUrl' => $sampleYoutubeUrl,
             ],
         ]);
     }

backend/tests/Feature/SetsEndpointTest.php

@@ -34,6 +34,7 @@ class SetsEndpointTest extends TestCase
                 description: $baderechSet->getDescription(),
                 richText: '',
                 pdfPath: null,
+                youtubeUrl: null,
                 parentElement: null,
             )
         );

backend/tests/Unit/Controllers/ElementControllerTest.php

@@ -32,6 +32,7 @@ class ElementControllerTest extends TestCase
             'A structured path for growth',
             '<p>A structured path for growth</p>',
             '/assets/pdfs/baderech.pdf',
+            'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
             null,
         );
         $firstChildElement = $this->createElement(
@@ -40,6 +41,7 @@ class ElementControllerTest extends TestCase
             'Foundations for steady avodah',
             '<p>Foundations rich text</p>',
             '/assets/pdfs/foundations.pdf',
+            null,
             $element,
         );
         $secondChildElement = $this->createElement(
@@ -48,6 +50,7 @@ class ElementControllerTest extends TestCase
             'Daily practices for growth',
             '<p>Daily practice rich text</p>',
             null,
+            null,
             $element,
         );
 
@@ -69,6 +72,10 @@ class ElementControllerTest extends TestCase
             '/assets/pdfs/baderech.pdf',
             $body['element']['pdfPath'],
         );
+        $this->assertSame(
+            'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
+            $body['element']['youtubeUrl'],
+        );
         $this->assertSame([
             [
                 'id' => $firstChildElement->getId(),
@@ -121,6 +128,7 @@ class ElementControllerTest extends TestCase
         string $description,
         string $richText,
         ?string $pdfPath,
+        ?string $youtubeUrl,
         ?Element $parentElement,
     ): Element {
         return $this->elementRepo->create(new CreateElementDto(
@@ -129,6 +137,7 @@ class ElementControllerTest extends TestCase
             description: $description,
             richText: $richText,
             pdfPath: $pdfPath,
+            youtubeUrl: $youtubeUrl,
             parentElement: $parentElement,
         ));
     }

backend/tests/Unit/Element/ElementTest.php

@@ -22,6 +22,7 @@ class ElementTest extends TestCase
             description: 'Root description',
             richText: '<p>Root rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             set: $set,
             parentElement: null,
         );
@@ -31,6 +32,7 @@ class ElementTest extends TestCase
             description: 'Child description',
             richText: '<p>Child rich text</p>',
             pdfPath: '/assets/pdfs/child.pdf',
+            youtubeUrl: 'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
             set: $set,
             parentElement: $rootElement,
         );
@@ -49,9 +51,14 @@ class ElementTest extends TestCase
             '/assets/pdfs/child.pdf',
             $childElement->getPdfPath(),
         );
+        $this->assertSame(
+            'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
+            $childElement->getYoutubeUrl(),
+        );
         $this->assertSame($set, $childElement->getSet());
         $this->assertSame($rootElement, $childElement->getParentElement());
         $this->assertNull($rootElement->getPdfPath());
+        $this->assertNull($rootElement->getYoutubeUrl());
         $this->assertNull($rootElement->getParentElement());
     }
 }

backend/tests/Unit/Element/UseCases/CreateElementTest.php

@@ -50,6 +50,7 @@ class CreateElementTest extends TestCase
             description: 'Root description',
             richText: '<p>Root rich text</p>',
             pdfPath: '/assets/pdfs/root.pdf',
+            youtubeUrl: 'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
             parentElementId: null,
         ));
 
@@ -58,6 +59,10 @@ class CreateElementTest extends TestCase
         $this->assertSame('Root description', $element->getDescription());
         $this->assertSame('<p>Root rich text</p>', $element->getRichText());
         $this->assertSame('/assets/pdfs/root.pdf', $element->getPdfPath());
+        $this->assertSame(
+            'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
+            $element->getYoutubeUrl(),
+        );
         $this->assertSame($set->getId(), $element->getSet()->getId());
         $this->assertNull($element->getParentElement());
     }
@@ -72,6 +77,7 @@ class CreateElementTest extends TestCase
                 description: 'Root description',
                 richText: '<p>Root rich text</p>',
                 pdfPath: null,
+                youtubeUrl: null,
                 parentElementId: null,
             )
         );
@@ -83,6 +89,7 @@ class CreateElementTest extends TestCase
                 description: 'Child description',
                 richText: '<p>Child rich text</p>',
                 pdfPath: '/assets/pdfs/child.pdf',
+                youtubeUrl: 'https://youtu.be/yHx-r4p6hHU',
                 parentElementId: $rootElement->getId(),
             )
         );
@@ -100,6 +107,10 @@ class CreateElementTest extends TestCase
             '/assets/pdfs/child.pdf',
             $childElement->getPdfPath(),
         );
+        $this->assertSame(
+            'https://youtu.be/yHx-r4p6hHU',
+            $childElement->getYoutubeUrl(),
+        );
         $this->assertSame(
             $rootElement->getId(),
             $childElement->getParentElement()->getId(),
@@ -116,12 +127,14 @@ class CreateElementTest extends TestCase
             description: null,
             richText: null,
             pdfPath: null,
+            youtubeUrl: null,
             parentElementId: null,
         ));
 
         $this->assertSame('', $element->getDescription());
         $this->assertSame('', $element->getRichText());
         $this->assertNull($element->getPdfPath());
+        $this->assertNull($element->getYoutubeUrl());
     }
 
     public function testCreatesElementWithNullPdfPathWhenBlank(): void
@@ -134,12 +147,30 @@ class CreateElementTest extends TestCase
             description: 'Root description',
             richText: '<p>Root rich text</p>',
             pdfPath: '',
+            youtubeUrl: null,
             parentElementId: null,
         ));
 
         $this->assertNull($element->getPdfPath());
     }
 
+    public function testCreatesElementWithNullYoutubeUrlWhenBlank(): void
+    {
+        $set = $this->createSet('Daily learning');
+
+        $element = $this->createElement->execute(new CreateElementRequest(
+            setId: $set->getId(),
+            title: 'Root',
+            description: 'Root description',
+            richText: '<p>Root rich text</p>',
+            pdfPath: null,
+            youtubeUrl: '',
+            parentElementId: null,
+        ));
+
+        $this->assertNull($element->getYoutubeUrl());
+    }
+
     public function testThrowsWhenSetIdMissing(): void
     {
         $this->expectException(BadRequestException::class);
@@ -151,6 +182,7 @@ class CreateElementTest extends TestCase
             description: 'Root description',
             richText: '<p>Root rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElementId: null,
         ));
     }
@@ -166,6 +198,7 @@ class CreateElementTest extends TestCase
             description: 'Root description',
             richText: '<p>Root rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElementId: null,
         ));
     }
@@ -181,6 +214,7 @@ class CreateElementTest extends TestCase
             description: 'Root description',
             richText: '<p>Root rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElementId: null,
         ));
     }
@@ -200,6 +234,7 @@ class CreateElementTest extends TestCase
             description: 'Child description',
             richText: '<p>Child rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElementId: 99,
         ));
     }
@@ -213,6 +248,7 @@ class CreateElementTest extends TestCase
             description: 'Root description',
             richText: '<p>Root rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElementId: null,
         ));
 
@@ -227,6 +263,7 @@ class CreateElementTest extends TestCase
             description: 'Another root description',
             richText: '<p>Another root rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElementId: null,
         ));
     }
@@ -242,6 +279,7 @@ class CreateElementTest extends TestCase
                 description: 'Parent root description',
                 richText: '<p>Parent root rich text</p>',
                 pdfPath: null,
+                youtubeUrl: null,
                 parentElementId: null,
             )
         );
@@ -257,6 +295,7 @@ class CreateElementTest extends TestCase
             description: 'Invalid child description',
             richText: '<p>Invalid child rich text</p>',
             pdfPath: null,
+            youtubeUrl: null,
             parentElementId: $parentElement->getId(),
         ));
     }

backend/tests/Unit/Element/UseCases/GetElementTest.php

@@ -33,6 +33,7 @@ class GetElementTest extends TestCase
             'A structured path for growth',
             '<p>A structured path for growth</p>',
             '/assets/pdfs/baderech.pdf',
+            'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
             null,
         );
 
@@ -56,6 +57,10 @@ class GetElementTest extends TestCase
             '/assets/pdfs/baderech.pdf',
             $foundElement->getPdfPath(),
         );
+        $this->assertSame(
+            'https://www.youtube.com/watch?v=yHx-r4p6hHU&t=1s',
+            $foundElement->getYoutubeUrl(),
+        );
     }
 
     public function testReturnsDirectChildElements(): void
@@ -68,6 +73,7 @@ class GetElementTest extends TestCase
             '<p>A structured path for growth</p>',
             '/assets/pdfs/baderech.pdf',
             null,
+            null,
         );
         $firstChildElement = $this->createElement(
             $set,
@@ -75,6 +81,7 @@ class GetElementTest extends TestCase
             'Foundations for steady avodah',
             '<p>Foundations rich text</p>',
             '/assets/pdfs/foundations.pdf',
+            null,
             $parentElement,
         );
         $secondChildElement = $this->createElement(
@@ -83,6 +90,7 @@ class GetElementTest extends TestCase
             'Daily practices for growth',
             '<p>Daily practice rich text</p>',
             null,
+            null,
             $parentElement,
         );
         $this->createElement(
@@ -91,6 +99,7 @@ class GetElementTest extends TestCase
             'Nested description',
             '<p>Nested rich text</p>',
             null,
+            null,
             $firstChildElement,
         );
         $otherSet = $this->createSet(2, 'Daily Learning');
@@ -101,6 +110,7 @@ class GetElementTest extends TestCase
             '<p>Other parent rich text</p>',
             null,
             null,
+            null,
         );
         $this->createElement(
             $otherSet,
@@ -108,6 +118,7 @@ class GetElementTest extends TestCase
             'Other child description',
             '<p>Other child rich text</p>',
             null,
+            null,
             $otherParentElement,
         );
 
@@ -169,6 +180,7 @@ class GetElementTest extends TestCase
         string $description,
         string $richText,
         ?string $pdfPath,
+        ?string $youtubeUrl,
         ?Element $parentElement,
     ): Element {
         return $this->elementRepo->create(new CreateElementDto(
@@ -177,6 +189,7 @@ class GetElementTest extends TestCase
             description: $description,
             richText: $richText,
             pdfPath: $pdfPath,
+            youtubeUrl: $youtubeUrl,
             parentElement: $parentElement,
         ));
     }

frontend/rabbi_gerzi/cypress/e2e/media.cy.ts

@@ -46,6 +46,11 @@ describe('media page sets', () => {
         .should('be.visible')
       cy.contains('strong', 'Move steadily').should('be.visible')
     })
+    cy.get('[data-cy="element-youtube-embed"]')
+      .should('be.visible')
+      .and('have.attr', 'src')
+      .and('include', 'https://www.youtube.com/embed/yHx-r4p6hHU')
+      .and('include', 'start=1')
     cy.contains('[data-cy="element-pdf-link"]', 'View PDF')
       .should('be.visible')
       .and('have.attr', 'href', '/assets/pdfs/baderech.pdf')
@@ -82,6 +87,7 @@ describe('media page sets', () => {
         'contain.text',
         'Avodah foundations begin with honest awareness',
       )
+    cy.get('[data-cy="element-youtube-embed"]').should('not.exist')
     cy.get('[data-cy="element-pdf-link"]').should('not.exist')
   })
 })

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -10,6 +10,7 @@ export interface ChildElement {
 export interface Element extends ChildElement {
   richText: string
   pdfPath: string | null
+  youtubeUrl: string | null
 }
 
 interface ElementResponse {

frontend/rabbi_gerzi/src/views/ElementPage.vue

@@ -5,10 +5,22 @@ import { useRoute } from 'vue-router'
 import SiteHeader from '@/components/SiteHeader.vue'
 import { useElementsStore } from '@/stores/elements'
 
+type TimestampPart = string | undefined
+
 const route = useRoute()
 const elementsStore = useElementsStore()
 const { element, childElements, isLoading, error } = storeToRefs(elementsStore)
 
+const youtubeIframeAllow = [
+  'accelerometer',
+  'autoplay',
+  'clipboard-write',
+  'encrypted-media',
+  'gyroscope',
+  'picture-in-picture',
+  'web-share',
+].join('; ')
+
 const elementId = computed(() => {
   const routeElementId = route.params.id
 
@@ -19,6 +31,12 @@ const elementId = computed(() => {
   return routeElementId
 })
 
+const youtubeEmbedUrl = computed(() => {
+  const youtubeUrl = element.value?.youtubeUrl ?? null
+
+  return getYoutubeEmbedUrl(youtubeUrl)
+})
+
 watch(
   elementId,
   (currentElementId) => {
@@ -30,6 +48,154 @@ watch(
   },
   { immediate: true },
 )
+
+function getYoutubeEmbedUrl(youtubeUrl: string | null): string | null {
+  if (youtubeUrl === null || youtubeUrl === '') {
+    return null
+  }
+
+  let parsedUrl: URL
+  try {
+    parsedUrl = new URL(youtubeUrl)
+  } catch {
+    return null
+  }
+
+  const videoId = getYoutubeVideoId(parsedUrl)
+  if (videoId === null) {
+    return null
+  }
+
+  const embedUrl = new URL(`https://www.youtube.com/embed/${videoId}`)
+  const startSeconds = getYoutubeStartSeconds(parsedUrl)
+  if (startSeconds !== null) {
+    embedUrl.searchParams.set('start', startSeconds.toString())
+  }
+
+  return embedUrl.toString()
+}
+
+function getYoutubeVideoId(parsedUrl: URL): string | null {
+  if (isShortYoutubeHost(parsedUrl.hostname)) {
+    return normalizeYoutubeVideoId(getFirstPathSegment(parsedUrl))
+  }
+
+  if (!isYoutubeHost(parsedUrl.hostname)) {
+    return null
+  }
+
+  if (parsedUrl.pathname === '/watch') {
+    return normalizeYoutubeVideoId(parsedUrl.searchParams.get('v'))
+  }
+
+  if (parsedUrl.pathname.startsWith('/embed/')) {
+    return normalizeYoutubeVideoId(getPathSegment(parsedUrl, 1))
+  }
+
+  return null
+}
+
+function getYoutubeStartSeconds(parsedUrl: URL): number | null {
+  const startParam = parsedUrl.searchParams.get('start')
+  if (startParam !== null) {
+    return getPositiveSeconds(startParam)
+  }
+
+  const timestampParam = parsedUrl.searchParams.get('t')
+  if (timestampParam === null) {
+    return null
+  }
+
+  return getTimestampSeconds(timestampParam)
+}
+
+function getTimestampSeconds(timestampParam: string): number | null {
+  if (/^\d+$/.test(timestampParam)) {
+    return getPositiveSeconds(timestampParam)
+  }
+
+  const hourRegex = '^(?:(\\d+)h)?'
+  const minuteRegex = '(?:(\\d+)m)?'
+  const secondRegex = '(?:(\\d+)s)?$'
+  const fullTimestampRegex = hourRegex + minuteRegex + secondRegex
+  const timestampPattern = new RegExp(fullTimestampRegex)
+  const timestampMatch = timestampParam.match(timestampPattern)
+  if (timestampMatch === null) {
+    return null
+  }
+
+  const hours = getTimestampHours(timestampMatch[1])
+  const minutes = getTimestampMinutes(timestampMatch[2])
+  const seconds = getTimestampSecondsPart(timestampMatch[3])
+  const totalSeconds = hours + minutes + seconds
+
+  return totalSeconds > 0 ? totalSeconds : null
+}
+
+function getTimestampHours(timestampPart: TimestampPart): number {
+  return getPartSeconds(timestampPart, 3600)
+}
+
+function getTimestampMinutes(timestampPart: TimestampPart): number {
+  return getPartSeconds(timestampPart, 60)
+}
+
+function getTimestampSecondsPart(timestampPart: TimestampPart): number {
+  return getPartSeconds(timestampPart, 1)
+}
+
+function getPartSeconds(timestamp: TimestampPart, multiplier: number): number {
+  if (timestamp === undefined) {
+    return 0
+  }
+
+  return Number(timestamp) * multiplier
+}
+
+function getPositiveSeconds(secondsParam: string): number | null {
+  const seconds = Number(secondsParam)
+  if (!Number.isInteger(seconds) || seconds < 0) {
+    return null
+  }
+
+  return seconds
+}
+
+function getFirstPathSegment(parsedUrl: URL): string | null {
+  return getPathSegment(parsedUrl, 0)
+}
+
+function getPathSegment(parsedUrl: URL, segmentIndex: number): string | null {
+  const pathSegments = parsedUrl.pathname.split('/').filter((pathSegment) => {
+    return pathSegment !== ''
+  })
+
+  return pathSegments[segmentIndex] ?? null
+}
+
+function normalizeYoutubeVideoId(videoId: string | null): string | null {
+  if (videoId === null || videoId === '') {
+    return null
+  }
+
+  if (!/^[A-Za-z0-9_-]+$/.test(videoId)) {
+    return null
+  }
+
+  return videoId
+}
+
+function isYoutubeHost(hostname: string): boolean {
+  const normalizedHostname = hostname.toLowerCase()
+  const isRootYoutubeHost = normalizedHostname === 'youtube.com'
+  const isYoutubeSubdomain = normalizedHostname.endsWith('.youtube.com')
+
+  return isRootYoutubeHost || isYoutubeSubdomain
+}
+
+function isShortYoutubeHost(hostname: string): boolean {
+  return hostname.toLowerCase() === 'youtu.be'
+}
 </script>
 
 <template>
@@ -56,6 +222,18 @@ watch(
           v-html="element.richText"
         />
 
+        <div v-if="youtubeEmbedUrl !== null" class="element-page__youtube">
+          <iframe
+            :src="youtubeEmbedUrl"
+            :allow="youtubeIframeAllow"
+            class="element-page__youtube-iframe"
+            data-cy="element-youtube-embed"
+            title="YouTube video player"
+            loading="lazy"
+            allowfullscreen
+          />
+        </div>
+
         <div v-if="element.pdfPath !== null" class="element-page__actions">
           <a
             :href="element.pdfPath"
@@ -149,6 +327,21 @@ watch(
   font-weight: 700;
 }
 
+.element-page__youtube {
+  aspect-ratio: 16 / 9;
+  margin-top: 1.75rem;
+  overflow: hidden;
+  background: #000000;
+  border-radius: 8px;
+}
+
+.element-page__youtube-iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
 .element-page__actions {
   display: flex;
   justify-content: center;