Foundation.mozilla.org: Add video to landing page for Training

[xmatthewx]

There's a new video for open leadership training that is super awesome. It would be great to add this to the landing page. Not critical for launch, but a very nice addition. Might require a wee bit of copy edits.

On a related note: I could see a 10 minute task: watch the video and then evaluate your open leader practices for your. A nice way to sign up to learn about new opportunities.

cc @acabunoc @zee-moz @hannahkane

[hannahkane]

@xmatthewx - what's the blocker on this?

[acabunoc]

Video on YouTube: https://www.youtube.com/watch?v=quKdaqlR_9w&feature=youtu.be

[xmatthewx]

CMS was originally set to sanitize html, stripping iframe tags. Likely updated to now allow this. Let's give it a try.

[xmatthewx]

moving to future milestone

[hannahkane]

I tried adding the iframe, and it didn't work.

Looked like this:

[xmatthewx]

@alanmoo - We need to figure out how to allow video on CMS authored pages.

[alanmoo]

@cadecairos is this just CSP settings that need adjusting? (Approve-listing youtube?)

[cadecairos]

This is definitely CSP.

[xmatthewx]

Unblocked now @cadecairos @gideonthomas?

[cadecairos]

How are we doing the embed? using an iframe?

[cadecairos]

I'll fix this once we deploy the unity update to production as it simplifies the CSP update process.

I'm deploying it tomorrow.

[gideonthomas]

@xmatthewx, this should be working now (on staging), but it only allows videos from youtube. There isn't a secure way to allow videos from other websites, so we might have to add custom CSP rules on an as-needed basis.

[xmatthewx]

That's great. Youtube should serve most use-cases. We can link out with a thumbnail in other scenarios.

@acabunoc – when this gets promoted to production, you can go ahead and add your video. yippee. cc @hannahkane

[xmatthewx]

We need to make video responsive (#711) before we can close this.

[xmatthewx]

@taisdesouzalessa volunteered (i think 😄) to create a thumbnail to link to the video. She will also add a note as a tip to our author documentation.

[taisdesouzalessa]

Sure, I can do that - I will work on it today on staging, send for approval and once we have it, I can move it to prod. Does that work?

[gvn]

@taisdesouzalessa You may be able to use this technique instead:

https://github.com/mozilla/network/issues/711#issuecomment-333923524

[taisdesouzalessa]

Wow! Great @gvn - so MUCH better :). Thanks a lot for that. I'll do a trial run of the technique you pointed out as an author in staging and add the step by step on the manual. Very nice!

[taisdesouzalessa]

Now we have a responsive video on the page...yay! Tks, Gavin :).

Please check out on staging:
https://network.mofostaging.net/opportunity/training/

3 things:

1. The column is too wide after our latest changes on staging (that is why the video is so big on the page) - I am asking if that could be fixed here #813
2. I added this little intro copy to add some context to the video:
   "Learn more about the history of Mozilla and what it means to "work open" by watching this short video:" - please feel free to edit it to adjust to your needs.
3. I deleted the image because it seems unnecessary with the video. If the image was important, feel free to add it back. Or let me know and I can add it.

@acabunoc @hannahkane @xmatthewx

[acabunoc]

The video looks great @taisdesouzalessa! Will there be a link to actually sign up for Open Leadership 101?

[taisdesouzalessa]

Yep, good point. I should include the button back...haha. I will do that. I must have deleted it when messing with the video issue. Sorry.

[hannahkane]

Responsive video = great!
The sign-up form on the staging version is the wrong one. Should be the generic one, I believe.

[taisdesouzalessa]

@acabunoc @hannahkane thanks for the QA here! I just updated the page, see if it is okay now (for some reason we didn't have the default sign up box so I copied it from prod and pasted it on staging).

[hannahkane]

Yeah, looks great!

[taisdesouzalessa]

Added step by step of adding a responsive video in the Network Site User Guide as well: https://mzl.la/cms-guide

[xmatthewx]

Excellent. So we can close this?

[taisdesouzalessa]

I have to move those changes to prod (will do it today and then I'll close it), replicating what I did on staging because the databases are different.

One thing to notice, though: prod still has the 2 column layout, so what was seen in staging (1 column layout) won't be reflected on prod until we push the latest code changes from staging to prod.

[taisdesouzalessa]

@acabunoc and @hannahkane I applied those changes in our prod ok? Here is the link:
https://network.mozilla.org/opportunity/training/

I double checked to see if all changes were applied. Please take a look and let me know if you find anything wrong :).

Closing this issue. Feel free to reopen if you need additional tweaks.