From 82f44c47ed6712c15fec280c705ecf350e0bf756 Mon Sep 17 00:00:00 2001
From: Severyn Kozak <severyn.kozak@gmail.com>
Date: Tue, 24 Jun 2014 14:21:36 -0400
Subject: [PATCH] Replace scalable-video JS solution with pure CSS.

Add:
        static/(sass/about.sass, js/about.js)
                -Convert `adjustVimeoDimensions()`, which created the
                fluid-dimensioned Vimeo video, to a pure CSS solution.
---
 static/js/about.js     | 27 ---------------------------
 static/sass/about.sass | 17 ++++++++++++++---
 templates/about.html   |  6 ++++--
 3 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/static/js/about.js b/static/js/about.js
index 4540369..8e7481f 100644
--- a/static/js/about.js
+++ b/static/js/about.js
@@ -17,30 +17,3 @@ $(window).scroll(function(e){
     });
     lastVertPos = currVertPos;
 });
-
-/*
- * Make the dimensions of the vimeo video fluid.
-*/
-(function adjustVimeoDimensions(){
-    var iframe = $("iframe#vimeo")[0];
-    var videoRatio = (iframe.height / iframe.width) * 100;
-
-    iframe.style.position = "absolute";
-    iframe.style.top = "0";
-    iframe.style.left = "0";
-    iframe.width = "100%";
-    iframe.height = "100%";
-
-    iframe.style.height = "";
-    iframe.style.width = "";
-
-    var wrap = document.createElement("div");
-    wrap.className = "fluid-vids";
-    wrap.style.width = "100%";
-    wrap.style.position = "relative";
-    wrap.style.paddingTop = videoRatio + "%";
-
-    var iframeParent = iframe.parentNode;
-    iframeParent.insertBefore(wrap, iframe);
-    wrap.appendChild(iframe);
-}());
diff --git a/static/sass/about.sass b/static/sass/about.sass
index 8dbb670..bf03e9b 100644
--- a/static/sass/about.sass
+++ b/static/sass/about.sass
@@ -51,9 +51,20 @@ div.section
     &#top
         margin-top: 0px
 
-        iframe#vimeo
-            border: 1px solid $baseColor3
-            margin-top: 40px
+        div#wrap
+            width: 100%
+            position: relative
+            padding-top: 56.782% // aspect ration, 9 / 16
+
+            iframe#vimeo
+                border: 1px solid $baseColor3
+                margin-top: 40px
+
+                position: absolute
+                top: 0
+                left: 0
+                height: none
+                width: none
 
     div.centered
         font-size: 110%
diff --git a/templates/about.html b/templates/about.html
index 44683b7..81e2ca8 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -29,8 +29,10 @@
       and symbols (function, class, and variable names), amongst other attributes.
 
       Watch our introductory video:
-      <iframe id="vimeo" src="//player.vimeo.com/video/98697078" width="317" height="180" frameborder="0"
-        webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+      <div id="wrap">
+        <iframe id="vimeo" src="//player.vimeo.com/video/98697078" width="100%" height="100%" frameborder="0"
+          webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+      </div>
     </div>
   </div>