Merge branch 'master' into gh-pages

_includes/site_alert.html

@@ -1,13 +1,19 @@
 <div id="site-alert-overlay"></div>
 <div id="site-alert">
-  <a href="javascript:void(0);" class="close"><i class="fa fa-lg fa-times"></i><span class="sr-only">Close this dialogue</span></a>
-  <h3>You are now leaving usds.gov</h3>
-  <h4>
-    But you probably knew that already.<br />
-    PS: Did we mention <a href="/join">we're hiring UX designers?</a>
-  </h4>
-  <br />
-  <p>Click the link below to continue:<br />
-    <a href="javascript:void(0);" class="target-link" target="_blank"></a>
-  </p>
+  <div id="site-alert-exit-contents">
+    <a href="javascript:void(0);" class="close"><i class="fa fa-lg fa-times"></i><span class="sr-only">Close this dialogue</span></a>
+    <h3>You are now leaving usds.gov</h3>
+    <h4>
+      But you probably knew that already.<br />
+      PS: Did we mention <a href="/join">we're hiring UX designers?</a>
+    </h4>
+    <br />
+    <p>Click the link below to continue:<br />
+      <a href="javascript:void(0);" class="target-link" target="_blank"></a>
+    </p>
+  </div>
+  <div id="site-alert-video">
+    <a href="javascript:void(0);" class="close"><i class="fa fa-lg fa-times"></i><span class="sr-only">Close this dialogue</span></a>
+    <iframe id="site-alert-video-frame" src="" frameborder="0" allowfullscreen></iframe>
+  </div>
 </div>

_sass/_main.scss

@@ -331,7 +331,7 @@ body {
     }
   } // </header>
 
-  #site-alert-overlay, #site-alert {
+  #site-alert-overlay, #site-alert, #site-alert-exit-contents, #site-alert-video {
     position: fixed;
     background-color: #ffffff;
     display: none;
@@ -348,6 +348,7 @@ body {
     left: 50%;
     padding: 10px;
     width: 600px;
+    min-height: 365px;
     overflow: auto;
     @include css3-prefix('transform', 'translate(-300px, -150px)');
     @include css3-prefix('box-shadow', '0 6px 12px 0px rgba(0, 0, 0, 0.2)');
@@ -363,6 +364,10 @@ body {
       word-wrap: break-word;
     }
   }
+  #site-alert-video-frame {
+    width: 580px;
+    height: 326px;
+  }
   @media (max-width: $screen-xs-max) {
     #site-alert {
       top: 5%;
@@ -381,6 +386,13 @@ body {
     @media (max-width: $screen-xs-max) {
       margin-top: $fixed-header-height-mobile;
     }
+
+    /*.video-play {
+      img {
+        width: 128px;
+        height: 90px;
+      }
+    }*/
 
     .jumbotron {
       width: 100%;
@@ -409,6 +421,13 @@ body {
         line-height: 1.9em;
         font-weight: 300;
       }
+      /*.video-play {
+        height: 75%;
+        @include vertically-aligned-parent;
+        img {
+          @include vertical-align-relative;
+        }
+      }*/
       .jumbotron-text {
         position: absolute;
         left: 0;
@@ -417,6 +436,11 @@ body {
         margin: 0 auto;
         padding-bottom: 2em;
         @include radial-gradient(rgba(0,0,0,0.75) 40%, rgba(0,0,0,0) 70%);
+        .play-button img {
+          height: 16px;
+          width: 23px;
+          vertical-align: bottom;
+        }
       }
       .ted-teaser {
         position: absolute;

index.html

@@ -11,7 +11,10 @@ <h1>
     </h1>
     <h2>
       The United States Digital Service is a startup at The White House, using design<br />
-      and technology to deliver better services to the American people.
+      and technology to deliver better services to the American people.<br />
+      <a href="https://www.youtube.com/watch?v=aGe5rEDv3g8" class="play-button" target="_blank">
+        <button>Watch Video <img src="/img/youtube-play-inverted.png" alt="Play button for USDS video entitled 'You'll Never Be The Same Again' from YouTube" /></button>
+      </a>
     </h2>
   </div>
   <div class="ted-teaser" style="display: none">
@@ -21,7 +24,7 @@ <h2>
 </section>
 
 <section class="mobile-lede hidden-sm hidden-md hidden-lg">
-  <img src="/img/experts.jpg" alt="A photo of team members in the Indian Treaty Room (photo credit: Fast Company)">
+  <iframe width="100%" height="338" src="https://www.youtube.com/embed/aGe5rEDv3g8" frameborder="0" allowfullscreen></iframe>
   <h2>
     Building a more <span class="everything-is-awesome">awesome</span> government through technology
   </h2>

js/script.js

@@ -140,16 +140,28 @@ $( document ).ready(function() {
     // Catch all outgoing liks that are not to .gov, .mil, facebook.com, github.com, or twitter.com
     // and display a "you are now leaving..." message
     //
-    $( 'a[href^="http"]:not(.target-link)' ).on( "click", function() {
-      var domain = this.href.split('/')[2];
+    $( 'a[href^="http"]:not(.target-link)' ).on( "click", function(e) {
+      var domain = this.href.split('/')[2].replace('www.','');
       var tld = domain.substring(domain.length - 3);
       if (tld != 'gov' && tld != 'mil' && domain != 'facebook.com' && domain != 'github.com' && domain != 'twitter.com') {
         $( '#site-alert-overlay' ).show();
         $( '#site-alert' ).show();
-        var targetLink = $( '#site-alert .target-link')
-        targetLink.text(this.href);
-        targetLink.attr("href", this.href);
-        return false;
+        if (domain == 'youtube.com') {
+            $( '#site-alert-exit-contents' ).hide();
+            $( '#site-alert-video' ).show();
+            // parse YouTube URL
+            // https://www.youtube.com/watch?v=aGe5rEDv3g8 -> https://www.youtube.com/embed/aGe5rEDv3g8
+            var matches = this.href.match(/watch\?v=([a-z0-9]+)/i)
+            console.log(matches[1]);
+            $( '#site-alert-video-frame' ).attr('src', 'https://www.youtube.com/embed/' + matches[1])
+        } else {
+            $( '#site-alert-exit-contents' ).show();
+            $( '#site-alert-video' ).hide();
+            var targetLink = $( '#site-alert .target-link')
+            targetLink.text(this.href);
+            targetLink.attr("href", this.href);
+        }
+        e.preventDefault();
       }
     });
     $( '#site-alert .close, #site-alert .target-link, #site-alert-overlay' ).on( "click", function() {