1027273 - Create video embed markup/syntax for Resources

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Matt Thompson (@OpenMatt :OpenMatt)]

* Let's start by adding videos to the Privacy page. Then we can use that to make sure we have a process that works for adding videos / Popcorn to the other pages as well

* Kat: the most streamlined way to do that is for you to edit the JSON and submit a pull request here:
https://github.com/mozilla/webmaker.org/blob/master/public/data/content.json

* Let's make sure we understand from Aki / Kate the right way to edit the JSON for this

Comment 1

[Matt Thompson (@OpenMatt :OpenMatt)]

* Kat: in addition to what you may already have, I have some embedded video to use for this particular page here, which I originally created for this very purpose:

http://openmatt.org/how-to-teach-online-privacy/

Comment 2

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Aki / Kate: is this the correct approach to use for including an embedded iframe in the JSON blob?


      {
        "title": "What's a web browser?",
        "links": [
          "<strong>It's one of the most important pieces of software on your computer</strong>. But many people don't even know what it is! <a href='https://openmatt.makes.org/thimble/MTYwOTEwNTQwOA==/learn-about-your-web-browser'>This page quickly explains what browsers are and why they matter.</a>"
          "<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/BrXPcaRlBqo?rel=0" frameborder="0" allowfullscreen></iframe>
        ]
      },

Comment 3

[Matt Thompson (@OpenMatt :OpenMatt)]

* I just noticed errors already. Trying again: 

      {
        "title": "What's a web browser?",
        "links": [
          "<strong>It's one of the most important pieces of software on your computer</strong>. But many people don't even know what it is! <a href='https://openmatt.makes.org/thimble/MTYwOTEwNTQwOA==/learn-about-your-web-browser'>This page quickly explains what browsers are and why they matter.</a>"
          "<iframe width='560' height='315' src='//www.youtube-nocookie.com/embed/BrXPcaRlBqo?rel=0' frameborder='0' allowfullscreen></iframe>"
        ]
      },

Comment 4

[inactivate account for kate]

Change the src to be https. The width and height attributes will be problematic for some screen sizes. ideall some styles should be written to support this

Comment 5

[Kat Braybrooke [:codekat]]

so is this correct form, kate? 

just want to be 100% sure before i go in and start making edits to the resource pages. 

"<iframe width='560' height='315' https='//www.youtube-nocookie.com/embed/BrXPcaRlBqo?rel=0' frameborder='0' allowfullscreen></iframe>"

(should we leave width and height out, so you can restyle/make responsive?)

Comment 6

[Matt Thompson (@OpenMatt :OpenMatt)]

* Thanks Kate. As Kate points out, the ideal way to do this would be through the template itself. 
* e.g., "youtube_embed" or "popcorn_embed" 

* we may need to punt this to next train... thinking on it w. Kat now.

Comment 7

[inactivate account for kate]

yeah, someone needs to at least do some styles before this will work, so hold off on adding

Comment 8

[Aki Rose Braun [:akirose]]

I have thoughts on this! May open a PoC PR shortly.

Comment 9

[Aki Rose Braun [:akirose]]

Attachment: https://github.com/mozilla/webmaker.org/pull/822

Here's a thought on making those videos responsive, will attach screen-shots as well

Comment 10

[Aki Rose Braun [:akirose]]

Attachment: a2fx3.png

Comment 11

[Aki Rose Braun [:akirose]]

Attachment: kyw2u.png

Comment 12

[Matt Thompson (@OpenMatt :OpenMatt)]

Amaze! thanks Aki

* Kate work for you?

* Aki, if Kate R+'s this, can you let us know the right JSON syntax to use?

Comment 13

[Aki Rose Braun [:akirose]]

Matt: This is still a proof of concept, I think we'd have to think of a way to write a script for you to maybe just enter the video id to generate the tags. Definitely something for the next train, but just happened to be on my mind because it was something I had *just* done on a personal project a few days ago.

Comment 14

[inactivate account for kate]

Comment on attachment 8442430 [details] [review]
https://github.com/mozilla/webmaker.org/pull/822

Excellent approach, I think we should template-ize it though

Comment 15

[inactivate account for kate]

Comment on attachment 8442448 [details]
kyw2u.png

looks good, see comments in code review

Comment 16

[Matt Thompson (@OpenMatt :OpenMatt)]

* Not sure where this stands, now that Aki's on PTO

Comment 17

[Matt Thompson (@OpenMatt :OpenMatt)]

* Kate: based on what you've seen so far in this initial test run, should Kat continue following the same approach for adding videos to the other pages?

Comment 18

[inactivate account for kate]

Personally I think this needs more work before we can continue on this. If it's critical we land it, we can do a work around

Comment 19

[Matt Thompson (@OpenMatt :OpenMatt)]

* Ok. Moving to [july11]. And will file ticket to get this added to the template.

Comment 20

[Kat Braybrooke [:codekat]]

Just a note that I'm happy to dig into the JSON and update these sections when the template is finalised.

Comment 21

[Aki Rose Braun [:akirose]]

Comment on attachment 8442430 [details] [review]
https://github.com/mozilla/webmaker.org/pull/822

Updated based on Kate's inspiring github comments, possibly ready for a full json update, followed by prime time?

Comment 22

[Matt Thompson (@OpenMatt :OpenMatt)]

* Nice one, Aki. Thanks!

Comment 23

[Kat Braybrooke [:codekat]]

@Aki mind pinging me when this is ready to go so I can add syntax into the pad?

Comment 24

[Aki Rose Braun [:akirose]]

Kat: will-do. Still in exploratory mode, nailing down what that syntax will be.

Comment 25

[Aki Rose Braun [:akirose]]

Attachment: yl59r.png

Comment 26

[Aki Rose Braun [:akirose]]

Attachment: Sample Sub-section

This is what the json would look like in one timeline-type section within a discover, make, or teach section.

Comment 27

[inactivate account for kate]

Comment on attachment 8442430 [details] [review]
https://github.com/mozilla/webmaker.org/pull/822

A couple of small suggestions but I think this looks good to go, and monumentally more functional than what we have currently. Yay!

Comment 28

[inactivate account for kate]

Also let's move that example markup somewhere other than navigation though :P

Comment 29

[Aki Rose Braun [:akirose]]

@codekat it's all you if you're ready to make some changes—here's your sample code: https://github.com/gesa/webmaker.org/blob/1027273/video-embed/public/data/content.json#L2-L104

Comment 30

[Kat Braybrooke [:codekat]]

Great, blob is perfect - thanks Aki. Have added to my own syntax notes for JSON, and will embed the first videos now (in a separate bug for clarity's sake)

Two more additions to your markup re: our chat about this on IRC... 

Please add markup for: 
1) Embedded TED talks (like http://www.ted.com/talks/gary_kovacs_tracking_the_trackers )
2) Embedded Popcorn videos (like https://openmatt.makes.org/popcorn/22j3 )

Thank you!

Comment 31

[Aki Rose Braun [:akirose]]

Kat could you actually file separate bugs for those two embeds? They're definitely things I can do, but I'd like to have the actual but to track them.

Comment 32

[Kat Braybrooke [:codekat]]

Hey Aki, created bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=1032389

Is for both, hope that's fine. Closing as resolved for now so we can move to those last changes :)

Comment 33

[[github robot]]

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

https://github.com/mozilla/webmaker.org/commit/bb29f4c7a0df3aab70bf1eb93e9c03e5d4ff8a76
Fixes Bug 1027273 - Add embedded videos to Privacy resources page Proof of Concept

https://github.com/mozilla/webmaker.org/commit/31f9ebe9979f4bda6c31a41e39fe476435b2331e
Merge pull request #822 from gesa/1027273/video-embed

 Bug 1027273 - Add embedded videos to Privacy resources page