609027 - Modal video player

Status: VERIFIED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P2)

Description

[James Socol [:jsocol, :james]]

There's at least one case[1] where we need to have a video display a thumbnail and start open a modal to start playing on click. (If that's absolutely the only case, maybe we can rethink the necessity?)


[1] http://support-stage.mozilla.org/en-US/kb/ the "New to Firefox?" video.

Issues with what we have now[2]:
* The style is wrong.
* It uses YUI.
* The SWF for Flash fallback requires the video be on http://videos.mozilla.org/ (maybe that's fine).

I think we can replicate the behavior using jQuery, styles and tools we already have for modals. We probably need an argument to the [[Video:]] tag that specifies that it should be a modal player instead of inline.

Obviously this needs to be doable without requiring inline JS.


[2] http://viewvc.svn.mozilla.org/vc/projects/sumo/branches/1.5.6/webroot/js/video.js?view=markup

Comment 1

[Verdi [:verdi] Best to slack me]

Not that it's a P1 but this will get used in more places in the future such as the sidebar, possibly in Topic listings on the front page and on main Topic pages.

Comment 2

[James Socol [:jsocol, :james]]

Attachment: happens immediately on preview

Comment 3

[James Socol [:jsocol, :james]]

(In reply to comment #2)
> Created attachment 491839 [details]
> happens immediately on preview

Oh! One thing is the video's fault: I messed up the output dimensions creating it so it ended up letterboxed in white. The distance between the video and the blue title bar in the modal is probably perfect. (The space between the top of the modal and the title bar, otoh...)

Comment 4

[Paul Craciunoiu [:paulc]]

master:
https://github.com/jsocol/kitsune/commit/3a77be46cf6e566b909677209a9b3e6b929b1fb0
2.3.x:
https://github.com/jsocol/kitsune/commit/926a86abefd5faf5f6fa5b064c5f76b1d5a2bc5c


For QA:

Syntax is:

[[Video:title|modal(|placeholder=...|title=...)]]

modal is required if you want a modal window
placeholder, title are optional

placeholder = what replaces the video (and becomes clickable to open the modal)

title = the text on the top bar of the modal window.

Also:
* you can close the modal by either hitting escape or clicking on the outside of the modal (aka the overlay).
* if no placeholder is specified, the default is the video's thumbnail. If no title is specified, the default is the video title

Let me know if you need anything else clarified :)

Comment 5

[Rebecca Billings [:rbillings]]

Verified able to insert and play modal videos