Video Embed in how-to Step

[davehakkens]

Dev Todo

• Input field
• Validation
• Frontend component
• Frontend case handling
• Tests

Component infos

Description

Having the ability to embed a Youtube video instead of images as a step in the how-to

• Only Youtube is enough (no vimeo)
• Only 1 video per step
• Can't upload images + video
• Introduction (step 0) can't have video

Page where it will be used

• how to create (example)
• how to single page ( example)

Notes

Youtube has a few different URL structures. Share, Share with playlist, share on specific time shortlink etc. Below a few examples, all for the same video. We only need the basic structure. But people might copy/past another one. Can we make them all work, or should we ask users for one specific structure?

Same video, different urls:

1. https://www.youtube.com/watch?v=bsj6qHHLynk
2. https://youtu.be/bsj6qHHLynk
3. https://youtu.be/bsj6qHHLynk?t=60
4. https://www.youtube.com/watch?v=bsj6qHHLynk&list=PLE46712F10AA99DD4&index=1

Mockup

[chrismclarke]

Hey @davehakkens

I've given a first pass at this and deployed to a temporary so you can take a look at:
https://5e812e0bf6c3cd0008ab8941--oa-preview.netlify.com/

If you want to log-in to practice creating a how-to then use the same username/pw that you do on the dev.onearmy.world site.

I still need to add some tests but the main functionality should hopefully all be there (add url, show error if badly formatted or other images exist, display on how-to page).

The youtube url expects the standard url bar format which is given as an example placeholder https://www.youtube.com/watch?v=..., although if we want it would be easy to add support for other formats as well as other streaming platforms. Here's a demo of the package I'm using to display with full list of examples:
https://cookpete.com/react-player/

Screenshots: