From a57057ed8601159468dde6ea1296880da803749c Mon Sep 17 00:00:00 2001
From: Richard Bartlett <rich@loomio.org>
Date: Wed, 16 Nov 2016 09:04:04 +1300
Subject: [PATCH] add video-wrapper;

---
 README.md          |  7 ++++---
 styles/website.css | 16 ++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 69eca5b..0977574 100644
--- a/README.md
+++ b/README.md
@@ -8,10 +8,11 @@ The software we build is [open source](http://github.com/loomio/loomio), and our
 We build software for collaborative decision making, used by thousands of organisations and communities around the world. If you’re looking for a way to make group decisions without meeting, try it out at [loomio.org](https://www.loomio.org?utm_campaign=handbook&utm_source=handbook).
 
 ---
+<div class="video-wrapper">
+  <iframe src="https://www.youtube.com/embed/EXkQN9aL0R0" frameborder="0" allowfullscreen></iframe>
+</div>
 
-<iframe src="https://www.youtube.com/embed/EXkQN9aL0R0" frameborder="0" allowfullscreen></iframe>
-
-*VIDEO: Loomio co-founder Alanna introducing the co-op handbook, and talking about why we open source our organisational development.*
+*[VIDEO](https://www.youtube.com/watch?v=EXkQN9aL0R0): Loomio co-founder Alanna introducing the co-op handbook, and talking about why we open source our organisational development.*
 
 <div class="mobile-visible">
   <p>If you're viewing this on a small screen, you'll find a table of contents by clicking the menu icon at the top left. <i class="fa fa-align-justify"></i></p>
diff --git a/styles/website.css b/styles/website.css
index 3041f2a..d476cf6 100644
--- a/styles/website.css
+++ b/styles/website.css
@@ -8,6 +8,22 @@
   color: auto;
 }
 
+/* VIDEO */
+
+.video-wrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  padding-top: 25px;
+  height: 0;
+}
+.video-wrapper iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 /* IMAGES */
 
 .img-left{