1331048 - Video overlay on homepage - January 18th, 7am PT

Status: RESOLVED FIXED

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

Description

[Eric Renaud [:erenaud]]

*Video overlay at the top of moz.org homepage*

Comment 1

[Eric Renaud [:erenaud]]

Requirements/required assets:

- Graphics (place holder to click on to launch video)
- Copy (blurb about topic)
- Video (hosted - on either on CDN or on YouTube in moz.org channel - need location)
- Link (URL) to Open Design blog post
- Merge and push behind switch (see need by date/time)

Acceptance Criteria:
- Go live 7 am PT - Wednesday the 18th
- Removed 12 am (midnight) PT


Schedule:

- Need all assets final by EOD Friday, uploaded/linked to/commented in this bug
- Code in prod by EOD Tuesday (behind switch)

Comment 2

[Alex Gibson [:agibson]]

This is now up on demo1:

https://www-demo1.allizom.org/en-US/

Note: the takeover will only be shown once per tab session to avoid getting in people's way on return navigation. If you want to view it a second time, close the tab and then open a new one.

Things we still need are:

- Final (high-res) wordmark graphic for the header (SVG would probably be the ideal, but PNG would work fine also).
- Blog link and text? (if still needed).

Comment 3

[Alex Gibson [:agibson]]

Peter,

Sorry this is a short notice bug. I've added three GA events for the video linked above in the same manner for which we did the Rust video on the /technology page. Hope this will be sufficient:

dataLayer.push({
    'event': 'video-interaction',
    'videoTitle': 'mozilla brand video',
    'interaction': state
});

Possible values for `state` are:

'video play'
'video paused'
'video complete'

Any questions let me know, thanks.

Comment 4

[Alex Gibson [:agibson]]

Hi Rainer,

The page above is currently embedding the video from YouTube, but I'd also like to try using our own video CDN if possible. Is this something you could upload and provide a URL here? Thanks

Comment 5

[Alex Gibson [:agibson]]

Attachment: GitHub pull request

Comment 6

[yuliya]

Attachment: Mozilla_Logo.svg

Alex, attaching the logo svg here

Comment 7

[yuliya]

Blog text is: Learn more at the Mozilla Open Design blog
Blog link is: https://blog.mozilla.org/opendesign/

The link takes me to a black background page. The black background should only be for play mode. At page load let's start with a white background and transition to black on play.

If we can get this on CDN that would be great. Please let me know.

Comment 8

[yuliya]

Alex, thanks for pushing the updates.

Please remove the pink highlight background from everything except for "Mozilla Open Design blog".

Thanks

Comment 9

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #8)
> Alex, thanks for pushing the updates.
> 
> Please remove the pink highlight background from everything except for
> "Mozilla Open Design blog".
> 
> Thanks

Done, thanks

Comment 10

[Eric Renaud [:erenaud]]

From Rainer:

here are the links

CDN link

https://videos.cdn.mozilla.net/uploads/Videos creative/Mozilla-new logo.webmhd.webm

youtube link

https://youtu.be/MuLWXHgyEVw

youtube iframe (full HD ... if you need it in lower res please let me know)

<iframe width="1920" height="1080" src="https://www.youtube.com/embed/MuLWXHgyEVw?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Comment 11

[Rainer Cvillink]

FYI ... we stopped deploying in .ogv about 2 years ago .... if that changed here is the .ogv version if needed ...

https://videos.cdn.mozilla.net/uploads/Videos creative/Mozilla-new logo.oggtheora.ogv

Comment 12

[Alex Gibson [:agibson]]

I've updated the demo server to use the new YouTube URL:

https://www-demo1.allizom.org/en-US/

Please note it currently says "Please sign in to view this video"

Comment 13

[Alex Gibson [:agibson]]

> youtube iframe (full HD ... if you need it in lower res please let me know)

I do wonder if full HD might be a little overkill for the content in the video. Is there a slightly smaller but still high quality middle-ground we could reach maybe?

Comment 14

[Rainer Cvillink]

how about that

<iframe width="1280" height="720" src="https://www.youtube.com/embed/MuLWXHgyEVw?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Comment 15

[Alex Gibson [:agibson]]

(In reply to Rainer Cvillink from comment #14)
> how about that
> 
> <iframe width="1280" height="720"
> src="https://www.youtube.com/embed/MuLWXHgyEVw?rel=0&amp;showinfo=0"
> frameborder="0" allowfullscreen></iframe>

Oh, we're not pasting in an iframe like this. We're using the JS API YouTube provides. Is simply changing the dimensions of the video enough to actually change actual playback encoding?

Comment 16

[Rainer Cvillink]

I don't think I can change anything on my side .... youtube decides what resolution it delivers (full screen = HD .... smaller window sizes = smaller sizes ... )

Alex, does that make sense?

Comment 17

[Alex Gibson [:agibson]]

(In reply to Rainer Cvillink from comment #16)
> I don't think I can change anything on my side .... youtube decides what
> resolution it delivers (full screen = HD .... smaller window sizes = smaller
> sizes ... )
> 
> Alex, does that make sense?

Thanks Rainer, that's what I suspected - I think we're good here :)

Comment 18

[pgerman]

Alex, see updated 'videoTitle'

dataLayer.push({
    'event': 'video-interaction',
    'videoTitle': 'mozilla brand',
    'interaction': state
});

Comment 19

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/47bacc41a0d274c9567e786e1a1dd4fc7723b035
[fix bug 1331048] Brand video home takeover

https://github.com/mozilla/bedrock/commit/61b9300f34fa537a5c6fec49872404e577f06822
Merge pull request #4582 from mozilla/bug-1331048-brand-home-takeover

Bug 1331048 brand home takeover

Comment 20

[pgerman]

New videoTitle is correct on demo1

Comment 21

[Craig Cook (:craigcook)]

The takeover is hidden behind the switch "mozorg-home-brand-announce", which will need to be flipped ON in production around 7am PST on the 18th. 

There's a blog post that I expect will be going live at the same time. We're only linking to the general Open Design blog and not a specific post so that post doesn't necessarily have to block the home page takeover, but we should probably still coordinate the timing and get a final thumbs up before we flip the switch in prod.

Comment 22

[yuliya]

confirming, the video should be available globaly. the new brand pop-up only in english speaking countries.

thanks

Comment 23

[Craig Cook (:craigcook)]

(In reply to yuliya from comment #22)
> confirming, the video should be available globaly. the new brand pop-up only
> in english speaking countries.

The home page is translated in about 50 languages but the takeover content is only in English. We shouldn't show partial English content on a translated page.

Comment 24

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/31e3c2e4973216d8b2ba042db6a176a7994b6489
[bug 1331048] Hide navbar styling behind switch

https://github.com/mozilla/bedrock/commit/52dce398fa09d077db8fb8e02aa705ac5d1d6c42
Merge pull request #4586 from mozilla/bug-1331048-brand-home-takeover

[bug 1331048] Hide navbar styling behind switch

Comment 25

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/618a49057ca1d78e353f9625dfbb51056664b110
[bug 1331048] Remove brand switch from main navigation

https://github.com/mozilla/bedrock/commit/6a4a0a8f81f647867970ba0944b6262c8e7e791c
[bug 1331048] Add margin to modal to improve takeover UX

https://github.com/mozilla/bedrock/commit/a5a77503cb3906ffbf921142e77a748a0cbb4b62
Merge pull request #4588 from alexgibson/bug-1331048-remove-nav-brand-switch

[bug 1331048] Remove brand switch from main navigation