From 8011e5f7a8e243fab5ac7a572e6354eb05a22273 Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Tue, 3 Oct 2023 18:49:21 +0200
Subject: [PATCH] Video landing & Sequin udpate (#322)

---
 blog/2023-06-05-discord-bot/index.mdx         |  2 +-
 blog/2023-09-04-kahoot-testimonial/index.md   |  2 +-
 .../index.md                                  |  2 +-
 docs/advanced/1_self_host/index.mdx           |  2 +-
 .../15_authentification/index.mdx             |  2 +-
 docs/misc/2_setup_oauth/index.mdx             |  2 +-
 docs/misc/9_guides/sequin/index.mdx           |  6 +++
 src/css/custom.css                            | 15 +++++++
 src/landing/HeroExample.tsx                   | 39 ++++++-------------
 9 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/blog/2023-06-05-discord-bot/index.mdx b/blog/2023-06-05-discord-bot/index.mdx
index c758aa6ff..b49e8ff9f 100644
--- a/blog/2023-06-05-discord-bot/index.mdx
+++ b/blog/2023-06-05-discord-bot/index.mdx
@@ -873,7 +873,7 @@ If you have any questions or need further assistance, don't hesitate to reach ou
 <iframe
 	width="560"
 	height="315"
-	src="https://www.youtube.com/embed/VXj7xaWOAxo"
+	src="https://www.youtube.com/embed/VXj7xaWOAxo?vq=hd1080"
 	title="YouTube video player"
 	frameborder="0"
 	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/blog/2023-09-04-kahoot-testimonial/index.md b/blog/2023-09-04-kahoot-testimonial/index.md
index d65680d43..a46007980 100644
--- a/blog/2023-09-04-kahoot-testimonial/index.md
+++ b/blog/2023-09-04-kahoot-testimonial/index.md
@@ -60,7 +60,7 @@ Bellow you will find an internal app that is used by our CS team to translate fe
 <iframe
 	width="560"
 	height="315"
-	src="https://www.youtube.com/embed/DvCgpeHYd4Q"
+	src="https://www.youtube.com/embed/DvCgpeHYd4Q?vq=hd720"
 	title="YouTube video player"
 	frameborder="0"
 	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/blog/2023-09-05-teracapital-case-study/index.md b/blog/2023-09-05-teracapital-case-study/index.md
index bf6a31773..66ee93b13 100644
--- a/blog/2023-09-05-teracapital-case-study/index.md
+++ b/blog/2023-09-05-teracapital-case-study/index.md
@@ -64,7 +64,7 @@ Here is an anonymized version of our client-facing dashboard:
 <iframe
 	width="560"
 	height="315"
-	src="https://www.youtube.com/embed/NsAhQZi2FTg"
+	src="https://www.youtube.com/embed/NsAhQZi2FTg?vq=hd1080"
 	title="YouTube video player"
 	frameborder="0"
 	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/docs/advanced/1_self_host/index.mdx b/docs/advanced/1_self_host/index.mdx
index 2eabce505..fa2966d73 100644
--- a/docs/advanced/1_self_host/index.mdx
+++ b/docs/advanced/1_self_host/index.mdx
@@ -477,7 +477,7 @@ Now, your Windmill instance should use the SMTP settings you've provided to send
 <iframe
 	width="560"
 	height="315"
-	src="https://www.youtube.com/embed/Wyq6d0bkuGo"
+	src="https://www.youtube.com/embed/Wyq6d0bkuGo?vq=hd1080"
 	title="YouTube video player"
 	frameborder="0"
 	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/docs/core_concepts/15_authentification/index.mdx b/docs/core_concepts/15_authentification/index.mdx
index d45d75162..acc6368da 100644
--- a/docs/core_concepts/15_authentification/index.mdx
+++ b/docs/core_concepts/15_authentification/index.mdx
@@ -41,7 +41,7 @@ By default, users are not invited to any workspace, unless auto-invite has been
 <iframe
 	width="560"
 	height="315"
-	src="https://www.youtube.com/embed/Wyq6d0bkuGo"
+	src="https://www.youtube.com/embed/Wyq6d0bkuGo?vq=hd1080"
 	title="YouTube video player"
 	frameborder="0"
 	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/docs/misc/2_setup_oauth/index.mdx b/docs/misc/2_setup_oauth/index.mdx
index 93766b95a..fe800c17a 100644
--- a/docs/misc/2_setup_oauth/index.mdx
+++ b/docs/misc/2_setup_oauth/index.mdx
@@ -25,7 +25,7 @@ We recommend using a private navigation tab to test the new settings as soon as
 <iframe
 	width="560"
 	height="315"
-	src="https://www.youtube.com/embed/jSpuBsRv0yM"
+	src="https://www.youtube.com/embed/jSpuBsRv0yM?vq=hd1080"
 	title="YouTube video player"
 	frameborder="0"
 	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/docs/misc/9_guides/sequin/index.mdx b/docs/misc/9_guides/sequin/index.mdx
index 591fc694e..18f7021e3 100644
--- a/docs/misc/9_guides/sequin/index.mdx
+++ b/docs/misc/9_guides/sequin/index.mdx
@@ -21,6 +21,12 @@ You can use Sequin to build Windmill apps on top of third-party services using W
     	description="Resources are structured configurations and connections to third-party systems, with Resource Types defining the schema for each Resource."
     	href="/docs/core_concepts/resources_and_types"
     />
+	<DocCard
+    	title="Guide on Sequin.io"
+    	description="Original guide on Sequin.io"
+    	href="https://docs.sequin.io/guides/windmill"
+		target="_blank"
+    />
 </div>
 
 ## Setup a Sequin sync
diff --git a/src/css/custom.css b/src/css/custom.css
index ac5c694da..f20229b26 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -326,3 +326,18 @@ div.testimonials a:hover .discord-name {
 div.testimonials a:hover .wm-name {
 	color: #2196f3;
 }
+
+.video-container {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+}
+
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
diff --git a/src/landing/HeroExample.tsx b/src/landing/HeroExample.tsx
index 2e2057db3..37b518ffa 100644
--- a/src/landing/HeroExample.tsx
+++ b/src/landing/HeroExample.tsx
@@ -52,34 +52,17 @@ export default function HeroExample() {
 					infra or ours, with permissioning and monitoring included. Fully open-source and easy to
 					deploy on small and large infra. Any dependency with zero-config.
 				</p>
-
-				<div className="relative">
-					{!played && (
-						<div>
-							<div className="absolute top-0 bottom-0 left-0 right-0 bg-gray-900 opacity-20 dark:opacity-80 rounded-xl z-50 flex justify-center items-center flex-col gap-2"></div>
-							<div className="absolute top-0 bottom-0 left-0 right-0 rounded-xl z-50 flex justify-center items-center flex-col gap-2">
-								<PlayCircle
-									size={80}
-									onClick={() => setPlayed(true)}
-									className="text-gray-700 hover:text-blue-400 cursor-pointer transition-all dark:text-white"
-								/>
-								<span className="text-gray-700 font-bold text-2xl inline-flex gap-2 items-center dark:text-white">
-									A tour of Windmill in 52s{' '}
-									<div className="inline-flex items-center">
-										(<VolumeX size="30px" />)
-									</div>
-								</span>
-							</div>
-						</div>
-					)}
-
-					<video
-						className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-						controls={played}
-						id="main-video"
-						src="/videos/main.mp4"
-					/>
-				</div>
+				<div className="video-container">
+                    <iframe
+                        width="100%"
+                        height="100%"
+                        src="https://www.youtube.com/embed/pJh2fdstV-A?vq=hd1080"
+                        title="YouTube video player"
+                        frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen="true"
+                    ></iframe>
+                </div>
 			</div>
 		</LandingSection>
 	);