From 0ffcd47b39d6cead224e168cc84daadd35527d85 Mon Sep 17 00:00:00 2001
From: Blake Wilson <blake.wilson@wpengine.com>
Date: Fri, 19 Nov 2021 10:55:09 -0600
Subject: [PATCH] docs: embed Faust.js tutorial walkthrough video

---
 docs/tutorial/dev-env-setup.mdx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/docs/tutorial/dev-env-setup.mdx b/docs/tutorial/dev-env-setup.mdx
index 8854e6f5b..e6bf268a0 100644
--- a/docs/tutorial/dev-env-setup.mdx
+++ b/docs/tutorial/dev-env-setup.mdx
@@ -8,7 +8,24 @@ description: Setting up your development environment with this guide will make y
 
 Use this guide to make your experience developing with Faust.js fast and efficient.
 
-You can also [follow the video companion](https://www.youtube.com/watch?v=i_L_Gl_Pp7g).
+<div style={{ position: `relative`, paddingTop: `56.25%`, marginBottom: `1rem` }}>
+  <iframe
+    width="100%"
+    style={{
+      position: `absolute`,
+      top: 0,
+      left: 0,
+      width: `100%`,
+      height: `100%`,
+      border: 0,
+    }}
+    src="https://www.youtube.com/embed/i_L_Gl_Pp7g"
+    title="YouTube video player"
+    frameBorder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+  ></iframe>
+</div>
 
 ## WordPress Site
 
@@ -100,9 +117,9 @@ Finally, we recommend you use [VS Code](https://code.visualstudio.com/) for your
 
 In addition, there are a few extensions that will make your experience building headless WordPress sites a lot easier:
 
-* [VS Code ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) - A set of snippets for React, Redux, and GraphQL
-* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Opinionated code formatted that enforces a consistent style
-* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - A linting tool to find problems in your JavaScript
+- [VS Code ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) - A set of snippets for React, Redux, and GraphQL
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Opinionated code formatted that enforces a consistent style
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - A linting tool to find problems in your JavaScript
 
 ## On Windows
 
@@ -111,4 +128,3 @@ If you are using Windows, we suggest you install [Powershell Core](https://docs.
 ## What's Next?
 
 The next step is to setup your [basic headless site](./basic-headless-site).
-