From 81c7d9d808f222ff60fe71185a048477dadf10b5 Mon Sep 17 00:00:00 2001
From: Michael <small203@morris.umn.edu>
Date: Sun, 14 Sep 2025 16:13:35 -0500
Subject: [PATCH 1/2] docs(mutations): embed mutations webinar

---
 docs/docs/mutations.md                          |  4 ++++
 docs/src/components/MutationsVideo/index.tsx    | 17 +++++++++++++++++
 .../components/MutationsVideo/styles.module.css | 15 +++++++++++++++
 3 files changed, 36 insertions(+)
 create mode 100644 docs/src/components/MutationsVideo/index.tsx
 create mode 100644 docs/src/components/MutationsVideo/styles.module.css

diff --git a/docs/docs/mutations.md b/docs/docs/mutations.md
index 6de8108..8df9bc5 100644
--- a/docs/docs/mutations.md
+++ b/docs/docs/mutations.md
@@ -74,6 +74,10 @@ This guide covers
   })),
 ```
 
+import MutationsVideo from '@site/src/components/Video';
+
+<MutationsVideo />
+
 But before going into depth of the "How" and "When" to use mutations, it is important to give context about
 the "Why" and "Who" of why mutations were built for the toolkit like this.
 
diff --git a/docs/src/components/MutationsVideo/index.tsx b/docs/src/components/MutationsVideo/index.tsx
new file mode 100644
index 0000000..fcaf9c6
--- /dev/null
+++ b/docs/src/components/MutationsVideo/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+export default function MutationsVideo(): React.JSX.Element {
+  return (
+    <div className={styles.iframeContainer}>    
+      <iframe 
+        className={styles.responsiveIframe}
+        src="https://www.youtube.com/embed/kDGQNizSfa0?start=3257" 
+        title="[EN] Webinar: Reactive Angular with the new NgRx Signal Store" 
+        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+        referrerpolicy="strict-origin-when-cross-origin" 
+        allowfullscreen>
+      </iframe>
+    </div>
+  );
+}
diff --git a/docs/src/components/MutationsVideo/styles.module.css b/docs/src/components/MutationsVideo/styles.module.css
new file mode 100644
index 0000000..7b26b1f
--- /dev/null
+++ b/docs/src/components/MutationsVideo/styles.module.css
@@ -0,0 +1,15 @@
+.iframeContainer {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+  overflow: hidden;
+}
+
+.responsiveIframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
\ No newline at end of file

From d53f72afb246613ca7a86ed2b35d13491c41c0a3 Mon Sep 17 00:00:00 2001
From: Michael <small203@morris.umn.edu>
Date: Sun, 14 Sep 2025 16:16:29 -0500
Subject: [PATCH 2/2] docs(mutations): fix jsx import file name

---
 docs/docs/mutations.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/mutations.md b/docs/docs/mutations.md
index 8df9bc5..960fb1f 100644
--- a/docs/docs/mutations.md
+++ b/docs/docs/mutations.md
@@ -74,7 +74,7 @@ This guide covers
   })),
 ```
 
-import MutationsVideo from '@site/src/components/Video';
+import MutationsVideo from '@site/src/components/MutationsVideo';
 
 <MutationsVideo />