Video cover photos in "masonry" view - how to improve the experience?

[BHall]

Has anyone used the "masonry" list view with a video-heavy/centric contest? I'm looking for a better way to get cover images on the tiles that represent a video entry.  Currently, a user would need to submit a separate image file as a cover photo in order for there to be one - it wont automatically use anything, like it does w/the first image in a post - which does not feel like a good user experience (esp for people new to community), it's not intuitive in the post editor, and it will be awkward to try and explain within the contest rules.

If you don't set a cover photo when you post, the view does some weird things:

[TariqHussain]

@BHall - What would you want to show on masonry view if it contains a video? 

[BHall]

The thumbnail frame, or whatever the video player shows within the body of the post.

[TariqHussain]

@BHall -  I don't think there is an  OOB way for this as masonry view checks for the cover image and if the cover image is not available it will use the first image within the body.  It does not show video thumbnail. 

However, a JS hack can be used for this.  You will need to get all the ids which do not contains cover or which does contains a video from masonry view and need to make a call to an endpoint.  You can make a single call for each card or you can send all the id's in a single call. 

In the endpoint using below query, you can get the thumb icon. 

SELECT * FROM videos WHERE messages.id = '1010'

 It will return 

 "thumb_href" : "https://i.ytimg.com/vi/_OBlgSz8sSM/hqdefault.jpg",

You can use this thumbnail as masonry card. 

[BHall]

---

TariqGrazitti wrote:

However, a JS hack can be used for this.  You will need to get all the ids which do not contains cover or which does contains a video from masonry view and need to make a call to an endpoint.  You can make a single call for each card or you can send all the id's in a single call. 

---

@TariqHussain let me know if i have your solution right, at a high level:

1. determine, from the standard OOTB masonry view, the post IDs that have videos

2. for each video post, go into the message and scrape the src of the video thumbnail in the iframe element

3. rebuild the masonry view as custom endpoint, inserting these thumbnail assets where the cover photo would typically be

[StanGromer]

Older post but figure it may help someone else in the future - Testing this last night, the masonry view will not pull in a Youtube/Vimeo thumbnail if you post it in the teaser window.  If you post it in blog body as a video inserted via link, it will pull in the thumbnail properly for the Masonry view.

[BrienH]

Thanks @StanGromer !

Looks like it was fixed in 18.3

• We fixed an issue where JavaScript displayed in Masonry cards instead of a video preview when a video was placed in the message body or teaser. Video previews now display correctly in Masonry cards. Note that teaser text is used instead of video preview if the body contains a video, but the teaser contains only text. 

---