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>
golioth · Nov 27, 2023 · fe5cd65 · fe5cd65
1 parent 667f57c
commit fe5cd65
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git 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
@@ -146,3 +146,8 @@ html[data-theme="dark"] {
     flex-direction: column;
   }
 }
+
+iframe.youtube-embed {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}