put video in overlay

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() {

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;
                 }
               }
             }

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;