Master Password video on index page.

Site/2013-05/css/main.css

@@ -11,8 +11,9 @@ a {
     position: relative;
     color: inherit;
 }
-a:link, a:visited {
+a:link, a:visited, *[onclick] {
     color: #08c;
+    cursor: pointer;
 }
 a:hover {
     text-decoration: none;
@@ -115,6 +116,27 @@ h2.inline, h3.inline, h4.inline {
 .thumb .pull-left {
     margin-right: 5ex;
 }
+.fit-height {
+    height: 100%;
+    max-height: 100%;
+}
+.middle {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    vertical-align: middle;
+}
+.middle::before {
+    display: inline-block;
+    content: "";
+    width: 0;
+    height: 100%;
+    margin-left: -2px;
+    vertical-align: middle;
+}
 
 .column {
     display: inline-block;
@@ -164,6 +186,46 @@ header .background {
     width: 100%;
     height: 100%;
 }
+header .box {
+    background: rgba(0, 0, 0, 0.8);
+    transition: all 0.5s;
+
+    position: absolute;
+    right: 1em;
+    bottom: 1em;
+    width: 160px;
+    height: 100px;
+
+    text-align: center;
+}
+header .box.active {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+}
+header .box::before {
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    height: 100%;
+    content: "";
+    margin-left: -2px;
+}
+header .box .minimized,
+header .box .maximized {
+    position: relative;
+    vertical-align: middle;
+}
+header .box .minimized,
+header .box.active .maximized {
+    display: inline-block;
+}
+header .box.active .minimized,
+header .box .maximized {
+    display: none;
+}
 #app header {
     height: 80%;
 }

Site/2013-05/index.html

@@ -56,18 +56,26 @@
         <header>
             <div class="background" data-stellar-ratio="0.4"></div>
             <div class="container">
-            
-                <!-- <div class="box effect-8">
-                    iframe id="ytplayer" type="text/html" width="640" height="360" frameborder="0"
-                        src="http://www.youtube.com/embed/QTfA0O7YnHQ?origin=http://masterpassword.lyndir.com&autohide=1&autoplay=0&rel=0&showinfo=0&theme=light&color=white"></iframe
-                    <iframe width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen
-                        src="http://player.vimeo.com/video/45803664?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
-                </div> -->
 
                 <div class="content">
                     <h1>Master Password</h1>
                     <h2>Secure your life, forget your passwords.</h2>
                 </div>
+            
+                <div class="box effect-8" onclick="$(this).toggleClass('active')">
+                    <div class="minimized">
+                        <img class="fit-height" src="http://i.vimeocdn.com/video/318668169_960.jpg" />
+                        <div class="middle">▷</div>
+                    </div>
+                    <div class="maximized">
+                        <iframe id="youtube" type="text/html" width="853" height="480" frameborder="0"
+                            webkitAllowFullScreen mozallowfullscreen allowFullScreen
+                            src="http://www.youtube-nocookie.com/embed/QTfA0O7YnHQ?autohide=1&amp;autoplay=0&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;color=white"></iframe>
+                        <!--iframe id="vimeo" type="text/html" width="853" height="480" frameborder="0"
+                            webkitAllowFullScreen mozallowfullscreen allowFullScreen
+                            src="http://player.vimeo.com/video/45803664?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe-->
+                    </div>
+                </div>
 
             </div>
         </header>