video moved to lightbox

css/docs.css

@@ -73,6 +73,33 @@ img.AngularJS-small {
   height: 25px;
 }
 
+.video-img {
+  width: 300px;
+  height: 200px;
+  background:url("../img/video-over.png")
+}
+
+.video-img:hover img{
+  position:absolute; left:-999px; top:-999px;
+}
+
 .app-source {
   min-height: 375px;
 }
+
+img.cache {
+  width: 0;
+  height: 0;
+}
+
+#videoModal {
+  display: block;
+  width: 1000px;
+  height: 705px;
+  margin-left: -500px;
+  margin-top: -337px;
+}
+#videoModal .modal-body {
+  max-height: 611px;
+  height: 611px;
+}

index.html

@@ -209,10 +209,20 @@ <h3>Plain JavaScript</h3>
         <br> <br> <br>
         <div app-run="todo.html" class="well"></div>
         <h3>Watch as we build this app</h3>
-        <iframe width="300" height="200" src="http://www.youtube.com/embed/WuiHuZq_cg4?hd=1" frameborder="0" allowfullscreen></iframe>
+        <div class="video-img" data-toggle="modal" href="#videoModal">
+          <img class="video" src="img/video.png">
+        </div>
       </div>
     </div>
 
+    <div class="modal hide fade" style="display: none;" id="videoModal">
+      <div class="modal-header">
+        <a class="close" data-dismiss="modal">×</a>
+        <h3>AngularJS Todo Tutorial</h3>
+      </div>
+      <div class="modal-body">
+      </div>
+    </div>
 
 
     <h1>Intermediate</h1>

js/homepage.js

@@ -244,6 +244,17 @@ angular.module('homepage', [])
 
   .run(function($rootScope){
     $rootScope.$evalAsync(function(){
+      var videoModal = $('#videoModal');
+
+      videoModal.modal({show:false});
+      videoModal.on('shown', function() {
+        videoModal.find('.modal-body').
+          html('<iframe width="970" height="576" src="http://www.youtube.com/embed/WuiHuZq_cg4?hd=1&autoplay=1" frameborder="0" allowfullscreen></iframe>')
+      });
+      videoModal.on('hidden', function() {
+        videoModal.find('.modal-body').html('');
+      });
+
       $('[rel=tooltip]').tooltip();
       $('[rel=popover]').popover();
     });