From 9344ea5d524214c807a88282641f2b308f8a075a Mon Sep 17 00:00:00 2001
From: Mike Szczys <mike@golioth.io>
Date: Mon, 27 Nov 2023 14:47:58 -0600
Subject: [PATCH] landing-page: add overview video

* Add overview video
* Add CSS for YouTube video embed
  * Usage:
    * on YouTube page, click Share->Embed and copy code into Docusuarus
    * remove the width and height properties
    * add `class="youtube-embed"`

Signed-off-by: Mike Szczys <mike@golioth.io>
---
 docs/landing_page.md | 2 ++
 src/css/custom.css   | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/docs/landing_page.md b/docs/landing_page.md
index 7e868d21..c1f8c822 100644
--- a/docs/landing_page.md
+++ b/docs/landing_page.md
@@ -16,6 +16,8 @@ need from the cloud, from establishing secure connections and providing
 over-the-air updates, to managing data to/from your fleet and connecting that to
 any cloud service you may need.
 
+<iframe class="youtube-embed" src="https://www.youtube.com/embed/CgQg6ifrWfU?si=9MKtgs4jlCvQLWfz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
 ## Get started today
 
 Our [Quickstart Guide](/getting-started/) gets you set up with a Golioth account
diff --git a/src/css/custom.css b/src/css/custom.css
index e3572bf3..df171555 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -146,3 +146,8 @@ html[data-theme="dark"] {
     flex-direction: column;
   }
 }
+
+iframe.youtube-embed {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}