Adding actual videos to builder page

apps/devhub/templates/devhub/builder.html

@@ -13,12 +13,20 @@
       {% endtrans %}
     </h2>
     <div class="builder-videos">
-      <a href="http://people.mozilla.org/~clouserw/public/blog/amo-2011-development.ogv" rel="video-lightbox">
-        <img src="{{ media('img/developers/jetpack_video_1.jpg') }}" alt="{{ _('Video 1') }}">
-        <div>{{ _('Video 1') }}</div></a>
-      <a href="http://people.mozilla.org/~clouserw/public/blog/amo-2011-development.ogv" rel="video-lightbox">
-        <img src="{{ media('img/developers/jetpack_video_2.jpg') }}" alt="{{ _('Video 2') }}">
-        <div>{{ _('Video 2') }}</div></a>
+      <a href="http://videos-cdn.mozilla.net/serv/marketing/Firefox5/AddOnsBuilderOverview.mp4"
+        rel="video-lightbox" data-width="640" alt="{{ _('Builder Overview') }}"
+        data-mp4="http://videos-cdn.mozilla.net/serv/marketing/Firefox5/AddOnsBuilderOverview.mp4"
+        data-webm="http://videos-cdn.mozilla.net/serv/marketing/Firefox5/AddOnsBuilderOverview.webm"
+        data-ogv="http://videos-cdn.mozilla.net/serv/marketing/Firefox5/AddOnsBuilderOverview.theora.ogv">
+        <img src="{{ media('img/developers/jetpack_video_1.jpg') }}" alt="{{ _('Builder Overview') }}">
+        <div>{{ _('Builder Overview') }}</div></a>
+      <a href="http://videos-cdn.mozilla.net/serv/marketing/Firefox5/AddOnsBuilderTutorial.mp4"
+        rel="video-lightbox" data-width="1024" alt="{{ _('Builder Tutorial') }}"
+        data-mp4="http://videos-cdn.mozilla.net/serv/marketing/Firefox5/AddOnsBuilderTutorial.mp4"
+        data-webm="http://videos-cdn.mozilla.net/serv/marketing/Firefox5/AddOnsBuilderTutorial.webm"
+        data-ogv="http://videos-cdn.mozilla.net/serv/marketing/Firefox5/AddOnsBuilderTutorial.theora.ogv">
+        <img src="{{ media('img/developers/jetpack_video_2.jpg') }}" alt="{{ _('Builder Tutorial') }}">
+        <div>{{ _('Builder Tutorial') }}</div></a>
     </div>
     <p>
     {% trans %}

media/css/impala/developers.less

@@ -76,15 +76,14 @@
     top: 0;
     width: 100%;
     z-index: 1000;
-
+    text-align: center;
     video {
-        height: 400px;
-        left: 50%;
-        margin-left: -300px;
-        margin-top: -200px;
-        position: absolute;
-        top: 50%;
-        width: 600px;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        max-height: 100%;
+        padding: 1em;
+        width: 100%;
     }
 }
 

media/js/zamboni/devhub.js

@@ -90,15 +90,27 @@ $(document).ready(function() {
     // Jetpack
     if($('#jetpack').exists()) {
         $('a[rel=video-lightbox]').click(_pd(function() {
-            var overlay = $('<div>', {id:'jetpack-overlay'}),
-                video = $('<video>', {'src': $(this).attr('href'), controls: 'controls',
-                                      'text': gettext('Your browser does not support the video tag')});
-            $(overlay).append(video);
-            $('body').append(overlay);
-            video[0].play();
-            $(video).click(function(e){ e.stopPropagation(); });
-            $(overlay).click(function() {
-                $(overlay).remove();
+            var $this = $(this),
+                text = gettext('Your browser does not support the video tag'),
+                $overlay = $('<div>', {id: 'jetpack-overlay'}),
+                $video = $('<video>', {'controls': 'controls', 'text': text,
+                                       'css': {'max-width': $this.attr('data-width') + 'px'}}),
+                $src_mp3 = $('<source>', {'type': 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+                                          'src': $this.attr('data-mp4') }),
+                $src_webm = $('<source>', {'type': 'video/webm; codecs="vp8, vorbis"',
+                                           'src': $this.attr('data-webm') }),
+                $src_ogv = $('<source>', {'type': 'video/ogv; codecs="theora, vorbis"',
+                                          'src': $this.attr('data-ogv') });
+
+            $overlay.append($video);
+            $video.append($src_mp3);
+            $video.append($src_webm);
+            $video.append($src_ogv);
+            $('body').append($overlay);
+            $video[0].play();
+            $video.click(function(e){ e.stopPropagation(); });
+            $overlay.click(function() {
+                $(this).remove();
             });
         }));
     }