Add videos list on homepage

[gracedoherty]

We'd like to showcase our two regional meeting videos as well as the local videos created by the city teams. Somewhere around 6-10 videos in total. What format would be possible for this?

Design options:

• Vertical list to the right of the "Blog Posts on Open Cities Africa" section of the homepage. The first 3 or 4 videos from the list would appear embedded, then a "More Videos..." link underneath.

• Is a selection wheel (like Spotify image attachment) or conveyor belt style possible? The first video would appear in front, but you can click a right or left arrow to scroll through the others (or on mobile, it would be swiping left/right).

• I don't like how YouTube playlists hide the selection pane after the first video starts, but it could be a last resort option. (example attached).

Available videos (more to come, will edit this comment with additions):

1. Open Cities Africa - Tool Design for Urban Resilience, https://youtu.be/XmzWJFHJJms
2. Open Cities Africa Kickoff 2018, https://youtu.be/Hny5omFwh00
3. Understanding Flood Vulnerability in Niger through Drones, Open Street Mapping and Flood Modeling, https://youtu.be/602ND1Z8Zbc
4. Open Cities Ngaoundéré : la cartographie libre pour aider à s'adapter au changement climatique, https://youtu.be/binFRCfg71w
5. Open Cities Africa - Saint-Louis English Subtitles, https://www.youtube.com/watch?v=6Sw96u00-GU&feature=youtu.be
6. FILM OPEN CITIES IN BRAZZAVILLE VERSION FINALE FULLHD, https://www.youtube.com/watch?v=hOyz4lmuOEI&t=3s
7. Will upload: Kinshasa
8. Will replace: Kickoff 2018

[gracedoherty]

Another example of what I mean by selection wheel/conveyor belt. I don't know what it's called. http://demo.geonode.org/

[cgiovando]

It's called carousel :)

There are different opinions about their usability/effectiveness in web design: https://usabilitygeek.com/sliders-web-design-use/

They even made a website to discourage carousels http://shouldiuseacarousel.com/

I would use a grid display with snapshots of first or featured frame (to save on page load) linking to videos on youtube, or just embed them in each city page.

[gracedoherty]

Definitely don't want an unused feature! Having videos on each city page is good, but we also have three (and soon 4) regional/overview videos that aren't city-specific.

How about this, where the boxes are snapshots and the "more videos" is to the OCA playlist:

[ppasq]

@gracedoherty is this the link to the playlist?

[gracedoherty]

Actually it's here: https://www.youtube.com/playlist?list=PLZA_MbhmZZ7YKgepryAaXONj5SvuPAXhy

I need to close that account you linked.

[ppasq]

I have added the video list with #137. The CSS still needs some fixing.

[vdeparday]

Thank you @ppasq. Yes on mobile. Blog posts on Open Cities and Videos shows as two parrallel columns. It would be better to have them one below the other.

Also the main video looks a bit like hanging in the middle.

[ppasq]

Fixed responsiveness.