docs: Embed video in tutorial for MongoDB connector (#1492)

estuary · Jun 24, 2024 · c6513b2 · c6513b2
1 parent 75faa0b
commit c6513b2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/site/docs/getting-started/tutorials/real-time-cdc-with-mongodb.md b/site/docs/getting-started/tutorials/real-time-cdc-with-mongodb.md
@@ -3,6 +3,7 @@ id: real_time_cdc_with_mongodb
 title: Real-time CDC with MongoDB
 sidebar_position: 2
 ---
+import ReactPlayer from "react-player"
 
 <head>
     <meta property="og:image" content="https://storage.googleapis.com/estuary-marketing-strapi-uploads/uploads//image4_5c651b17d6/image4_5c651b17d6.png" />
@@ -20,6 +21,9 @@ Because it’s the centerpiece of so many applications, it’s a common data eng
 
 This tutorial will guide you through using Estuary Flow to capture data from MongoDB using change data capture (CDC), requiring minimal configuration. By following these steps, you can empower your organization to leverage its application data in just a few minutes.
 
+## Video tutorial
+
+<ReactPlayer controls url="https://www.youtube.com/watch?v=kpF-YCxtArk" />
 
 ## What is CDC?<a id="what-is-cdc"></a>
 

diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -27,6 +27,7 @@
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-player": "^2.16.0",
     "stable": "^0.1.8"
   },
   "devDependencies": {
@@ -47,4 +48,4 @@
       "last 1 safari version"
     ]
   }
-}
+}