From 2c67cc0d74e80a4acf7f8230ba08f760b5924685 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Fri, 4 Aug 2023 13:03:43 +0300
Subject: [PATCH] Add video: Let's color the world orange (#43)

Also fixes the video iframe display.
---
 blueprint.md | 9 ++++++---
 css/21.css   | 5 ++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/blueprint.md b/blueprint.md
index 3cfbb36..04bc1c3 100644
--- a/blueprint.md
+++ b/blueprint.md
@@ -8,9 +8,12 @@ The following is a rough blueprint for starting a local "twentyone" community, o
 
 ![](/images/blueprint.png)
 
-It might help to watch the last [10 minutes of this
-video](https://youtu.be/iOWvL9-4k4A?t=982), which explains the blueprint in more
-detail.
+It might help to watch the last [10 minutes of this video](https://youtu.be/iOWvL9-4k4A?t=982), which explains the blueprint in more detail.
+We explicitely encourage you to learn from our experience and adopt the [concept](/concept).
+
+<div class="flex-vid">
+  <iframe src="https://www.youtube-nocookie.com/embed/NvD5Ea0GRIc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
 
 ## Team Up
 
diff --git a/css/21.css b/css/21.css
index 7195b34..1c9f564 100644
--- a/css/21.css
+++ b/css/21.css
@@ -205,9 +205,12 @@ h3:hover .headerlink {
 
 /* Video */
 .flex-vid {
+  position: relative;
 	height: 100%;
+  padding-bottom: 56.25%;
 }
 .flex-vid iframe {
+  position: absolute;
 	width: 100%;
 	height: 100%;
-}
\ No newline at end of file
+}