Permalink
Browse files

Adding actual videos to builder page

  • Loading branch information...
1 parent 4f7f905 commit 95154a6ea6f663b8c68f1439e0b97a45382e3438 @gkoberger gkoberger committed Jun 20, 2011
@@ -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 %}
@@ -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%;
}
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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();
});
}));
}

0 comments on commit 95154a6

Please sign in to comment.