From 2458b52aa9bfffae779227c2c51ed5a63dc577ce Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Thu, 2 Feb 2012 12:16:58 -0500
Subject: [PATCH] put video in overlay

---
 mitx_global.html     | 11 ++++++-----
 sass/_index.scss     | 18 +++++++-----------
 sass/_leanmodal.scss |  5 ++++-
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/mitx_global.html b/mitx_global.html
index 12640b63df..5505b84238 100644
--- a/mitx_global.html
+++ b/mitx_global.html
@@ -9,17 +9,14 @@
       <section class="intro-text">
       <p><em>MITx</em>  will offer a portfolio of MIT courses for free to a virtual community of learners around the world. It will also enhance the educational experience of its on-campus students, offering them online tools that supplement and enrich their classroom and laboratory experiences.</p>
       <p>The first <em>MITx</em> course, 6.002x (Circuits and Electronics), will be launched in an experimental prototype form. Watch this space for further upcoming courses, which will become available in Fall 2012.</p>
-
       </section>
+
     <section class="intro-video">
-      <div class="video-wrapper">
-      <iframe width="560" height="315" src="http://www.youtube.com/embed/p2Q6BrNhdh8?rel=0" frameborder="0" allowfullscreen></iframe>
-      </div>
+      <a rel="leanModal" href="#video-overlay"><img src="/static/images/video-image.png" alt="" /><span> Watch intro video</span></a>
     </section>
 
     </section>
 
-
     <section class="features">
       <h2><em>MIT<span>x</span></em> courses will be offered on an online learning platform that:</h2>
 
@@ -49,6 +46,10 @@
     <p>Taught by Anant Agarwal, with Gerald Sussman and Piotr Mitros, 6.002x (Circuits and Electronics) is an on-line adaption of 6.002, MIT&rsquo;s first undergraduate analog design course. This prototype course will run, free of charge, for students worldwide from March 1, 2012 through June 8, 2012. Students will be given the opportunity to demonstrate their mastery of the material and earn a certificate from <em>MITx</em>.</p>
   </section>
 </section>
+
+<div id="video-overlay" class="leanModal_box">
+  <iframe width="560" height="315" src="http://www.youtube.com/embed/p2Q6BrNhdh8?rel=0" frameborder="0" allowfullscreen></iframe>
+</div>
 <script>
 
 $(function() {
diff --git a/sass/_index.scss b/sass/_index.scss
index 6fd33f904f..44c138d530 100644
--- a/sass/_index.scss
+++ b/sass/_index.scss
@@ -255,20 +255,16 @@ section.index-content {
             &.intro-video {
               width: flex-grid(4, 8);
 
-              div.video-wrapper {
-                position: relative;
-                padding-bottom: 56.25%;
-                padding-top: 30px;
-                height: 0;
-                overflow: hidden;
+              a {
+                display: block;
                 width: 100%;
 
-                iframe {
-                  position: absolute;
-                  top: 0;
-                  left: 0;
+                img {
                   width: 100%;
-                  height: 100%;
+                }
+
+                span {
+                  display: none;
                 }
               }
             }
diff --git a/sass/_leanmodal.scss b/sass/_leanmodal.scss
index bdd1a9bb22..8c14db22d4 100644
--- a/sass/_leanmodal.scss
+++ b/sass/_leanmodal.scss
@@ -15,7 +15,6 @@ div.leanModal_box {
   @include box-sizing(border-box);
   display: none;
   border: none;
-  max-width: 600px;
   background: #fff;
   padding: lh(2);
 
@@ -27,6 +26,10 @@ div.leanModal_box {
     margin-bottom: lh();
   }
 
+  &#enroll {
+    max-width: 600px;
+  }
+
   form {
     text-align: left;