From 8940c9fa24d57c6dcd7bb6f00f8e145ec136afb3 Mon Sep 17 00:00:00 2001
From: Clark Boylan <clark.boylan@gmail.com>
Date: Thu, 27 May 2021 11:10:57 -0700
Subject: [PATCH] Embed the openinfra live video from youtube

This uses the no-cookie version of the embed to prevent info from going
to youtube unless users watch the video. Also this is a hack job of css
I welcome help :)

If we'd prefer to only link to the Youtube video rather than embed that
should be simpler and I can respin for that.

Change-Id: Iaaaed8b0927269665a5e850cab43f84322c825ad
---
 www/assets/css/main.css | 24 ++++++++++++++++++
 www/index.html          | 54 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/www/assets/css/main.css b/www/assets/css/main.css
index ab79962..2833e06 100644
--- a/www/assets/css/main.css
+++ b/www/assets/css/main.css
@@ -74,6 +74,23 @@ body {
 .container {
   width: 1400px; }
 
+/* Youtube embed size adjustment.
+ * Taken from https://stackoverflow.com/questions/35814653/automatic-height-when-embedding-a-youtube-video/54924505
+ */
+.yt-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+}
+
+.yt-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 @media screen and (max-width: 1680px) {
   .container.\31 25\25 {
     width: 100%;
@@ -273,6 +290,13 @@ body {
 .row.uniform.\32 5\25 {
   margin: -12.5px 0 -1px -12.5px; }
 
+.row-vid-title > * {
+  padding: 15px 0 0 50px;
+  float: left;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
 .\31 2u, .\31 2u\24 {
   width: 100%;
   clear: none;
diff --git a/www/index.html b/www/index.html
index 72313c9..668dcc9 100644
--- a/www/index.html
+++ b/www/index.html
@@ -114,7 +114,45 @@
           </div>
         </section>
 
-      <!-- Video -->
+      <!-- OpenInfra Live Video -->
+        <section class="wrapper style1">
+          <div class="container">
+            <div class="row">
+              <section class="3u 12u(narrower)">
+                <div class="box highlight">
+                </div>
+              </section>
+              <section class="6u 12u(narrower)">
+                <div class="yt-container">
+                  <iframe src="https://www.youtube-nocookie.com/embed/MptrjDKrKhI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                </div>
+              </section>
+              <section class="3u 12u(narrower)">
+                <div class="box highlight">
+                </div>
+              </section>
+            </div>
+            <div class="row-vid-title">
+              <section class="3u 12u(narrower)">
+                <div class="box highlight">
+                </div>
+              </section>
+              <section class="6u 12u(narrower)">
+                <div class="box highlight">
+                  <p>
+                    See how Zuul is used at scale.
+                  </p>
+                </div>
+              </section>
+              <section class="3u 12u(narrower)">
+                <div class="box highlight">
+                </div>
+              </section>
+            </div>
+          </div>
+        </section>
+
+      <!-- Gating Video -->
         <section class="wrapper style1">
           <div class="container">
             <div class="row">
@@ -129,6 +167,20 @@
                     <source src="media/simulation.mp4" type="video/mp4">
                     <track src="media/simulation.vtt" label="English" kind="subtitles" srclang="en">
                   </video>
+                </div>
+              </section>
+              <section class="3u 12u(narrower)">
+                <div class="box highlight">
+                </div>
+              </section>
+            </div>
+            <div class="row-vid-title">
+              <section class="3u 12u(narrower)">
+                <div class="box highlight">
+                </div>
+              </section>
+              <section class="6u 12u(narrower)">
+                <div class="box highlight">
                   <p>
                     See how Zuul tests cross-project changes in parallel.
                   </p>