docs: embed mutations webinar (#241)

Co-authored-by: Michael <[email protected]>

Author: michael-small

docs/docs/mutations.md

@@ -74,6 +74,10 @@ This guide covers
   })),
 ```
 
+import MutationsVideo from '@site/src/components/MutationsVideo';
+
+<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.
 

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>
+  );
+}

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;
+}