Closed Bug 989124 Opened 11 years ago Closed 11 years ago

update about page to have a video and be formatted like the mission page (asap)

Categories

(www.mozilla.org :: Pages & Content, defect)

Product:
www.mozilla.org
Component:
Pages & Content
Version:
Production
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: jbertsch, Assigned: agibson)

Details

(Whiteboard: [kb=1317389])

Attachments

(3 files)

Mock up of layout
1.06 MB, image/png
Details
Screen Shot 2014-03-27 at 6.02.48 PM.png
629.96 KB, image/png
Details
GitHub pull request
44 bytes, text/x-github-pull-request
Details | Review
Hello- We have been asked to update https://www.mozilla.org/en-US/about/ to the same template as http://www.mozilla.org/en-US/mission/ with a video and the links formatted in 4 columns below the video/intro area. The video will be ready tonight or tomorrow and ideally we will push this change to prod on Friday, March 28. Thanks you very much in advance for your quick turn around on this! Please reach out to me on IRC if you have any questions! Thx, Jen
Note: this change is for the en-us only page
What if the video automatically popped up as a light box overlay to play. If the user closes it, they will just be dropped back to the /about/ page. This will help from re-engineering the page and using a different template. You can't just switch templates as each page has their own template and CSS. Re-designing the current page will take longer. Is it fine that this video is only on the en-US page?
(In reply to Jennifer Bertsch [:jbertsch] from comment #1) > Note: this change is for the en-us only page confirmed.
(In reply to Jennifer Bertsch [:jbertsch] from comment #0) > Hello- > > We have been asked to update https://www.mozilla.org/en-US/about/ to the > same template as http://www.mozilla.org/en-US/mission/ with a video and the > links formatted in 4 columns below the video/intro area. > > The video will be ready tonight or tomorrow and ideally we will push this > change to prod on Friday, March 28. > > Thanks you very much in advance for your quick turn around on this! > > Please reach out to me on IRC if you have any questions! > > Thx, > Jen Who's responsible for getting the video up on a CDN? Rainer should be able to put it here: https://videos.cdn.mozilla.net/brand/
We need three versions uploaded to the /brand/ folder: .webm, .ogv, and .mp4 in web-friendly resolutions. Max width: 640px.
We also need an image or "poster" that will be displayed before the play button is clicked. Let's name the videos: Mozilla_2014_i_am.(webm|ogv|mp4) We are going to bedrock's video helper to make this easier: {{ video('Mozilla_2014_i_am.webm', 'Mozilla_2014_i_am.ogv', 'Mozilla_2014_i_am.mp4', h=259, w=460, prefix='//videos-cdn.mozilla.net/brand/', poster=media('img/mission/poster-i-am.jpg')) }}
Assignee: nobody → booboobenny+bugzilla
Update: WebOps changed the name of the CDN. Let's make sure when we use the video helper we use videos.cdn.mozilla.net. i.e. {{ video('Mozilla_2014_i_am.webm', 'Mozilla_2014_i_am.ogv', 'Mozilla_2014_i_am.mp4', h=259, w=460, prefix='//videos.cdn.mozilla.net/brand/', poster=media('img/mission/poster-i-am.jpg')) }}
Assignee: booboobenny+bugzilla → nobody
Assignee: nobody → booboobenny+bugzilla
Attached image Mock up of layout —
Rough mock up, but is this the kind of positioning we are looking for?
Dia: Please let us know when and where the video will be place so that we can get it uploaded to the CDN.
Flags: needinfo?(dbondi)
Here is what I came up with - this is real code. Note the css is hacked - it works but at some point when there is no time issue it should be cleaned up.
Please approve layout or suggest changes.
Flags: needinfo?(jbertsch)
alex - i thought i could handle this on my own but I am having issues with my local install of bedrock and less. i tried virtualenv and my vagrant install - something is wonky and I don't have the patience to deal with this now. Can you work on a version of this page that matches my mockup. Given the css i think this should be pretty trivial for you. I will check in with you in the morning.
Assignee: booboobenny+bugzilla → agibson
(In reply to Ben (:bensternthal) from comment #11) > Created attachment 8398253 [details] > Screen Shot 2014-03-27 at 6.02.48 PM.png > > Here is what I came up with - this is real code. Note the css is hacked - it > works but at some point when there is no time issue it should be cleaned up. Thanks, Ben. That is perfect. I imagine that we'll need to update the caption text tomorrow after someone has time to watch the video and write text. +Matej to this bug :)
Flags: needinfo?(jbertsch)
Hello Craig and Jen, Below is a link to the video files we discussed! Let me know if there are any issues! https://www.dropbox.com/sh/7qf3tbz97bzylhp/f2VJiYEdzD
Ok I have a PR ready for this based on Ben's mockup, We still need the video's uploaded to the CDN, and we also still need a suitable poster image and caption for the video. Can someone provide a poster image, or should we just pick a frame from the video? For non-en-US visitors, I suggest we just show a fallback image in place of where the video should be. Perhaps we could re-use the poster image here?
Dia - can you let us know what to use for the thumbnail. We should match whatever frame you are using on youtube (if you are using on youtube also).
(In reply to Ben (:bensternthal) from comment #18) > Dia - can you let us know what to use for the thumbnail. We should match > whatever frame you are using on youtube (if you are using on youtube also). And the same caption as well, if there is an existing one. If not, is there anything you had in mind? Or would you like me to take a stab at it?
(In reply to Ben (:bensternthal) from comment #18) > Dia - can you let us know what to use for the thumbnail. We should match > whatever frame you are using on youtube (if you are using on youtube also). Ben - let's match whatever frame they are using on youtube.
Flags: needinfo?(dbondi)
(In reply to Matej Novak [:matej] from comment #19) > (In reply to Ben (:bensternthal) from comment #18) > > Dia - can you let us know what to use for the thumbnail. We should match > > whatever frame you are using on youtube (if you are using on youtube also). > > And the same caption as well, if there is an existing one. If not, is there > anything you had in mind? Or would you like me to take a stab at it? Matej - could you please take a stab at writing something about the same length as the caption for the video on this page: http://www.mozilla.org/en-US/mission/
(In reply to Ben (:bensternthal) from comment #18) > Dia - can you let us know what to use for the thumbnail. We should match > whatever frame you are using on youtube (if you are using on youtube also). Dia/Ben: To keep the CSS less-complex, Alex would like to use an image in place of the video for non-en-US pages. If the thumbnail/poster image is generic enough to be used for non-en-US visitors that don't see an image, great, but if not, we will need another image. The only concern I have is that on www.mozilla.org images, we don't do many right/left aligned hero images in body content.
Caption: The heart of Mozilla is a global community with a shared mission. Watch the video to meet Mozillians from all over the world and all walks of life.
Attached file GitHub pull request —
Status: NEW → ASSIGNED
Whiteboard: [kb=1317389]
Commits pushed to master at https://github.com/mozilla/bedrock https://github.com/mozilla/bedrock/commit/c731877b54092582f9c64b8f6dbe9518acb26892 [fix bug 989124] update about page to have a video https://github.com/mozilla/bedrock/commit/7c0be6bd4f17029445e71e59016500a5c56723a7 Merge pull request #1840 from alexgibson/bug-989124-update-about-page-to-have-a-video [fix bug 989124] update about page to have a video
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Video is up on the -dev server and we are waiting for some other work to complete to push it out soon. https://www-dev.allizom.org/en-US/about/
It is live! http://www.mozilla.org/en-US/about/ Who do we need to tell that it is up and live on the site?
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: