Hello Intuiface community!
While working on our future Marketplace sample, I encountered the following need: displaying a long list of YouTube videos in a collection (Asset Grid) to enable a user to open 1 video at a time that would play full screen.
While an easy route would have been to just put a YouTube Asset as the data template of my collection (data comes from an Excel file), that would have meant to have N YouTube assets created and loaded in that collection just to display a clickable image, + 1 more YouTube asset to actually play the video full screen.
Each YouTube asset created in a scene will instantiate a chromium engine and consumes quite some resources. On Windows platform, you can easily spot this by looking at the task manager and notice the several CEFSharp.Browser sub-processes.
Since I hate consuming unnecessary resources, I searched for a quick & easy solution to be able to use an Image Asset in that collection and have 1 single YouTube Asset used to play the video.
I found this stackoverflow thread while searching for some kind of APIs to retrieve the YouTube thumbnails somehow and figured out a much, much simpler solution! You can get the thumbnail image of a YouTube video in just a link
https://i.ytimg.com/vi/<video id>/mqdefault.jpg
Alright, no need to code then, just some quick Excel formulas to create a new column with these thumbnails!
I already had my list of 78 YouTube links, I just used the formula below to extract the video ID and concatenate the URL above. Below is the formula I used, based on my B column containing the YouTube URLs
="https://i.ytimg.com/vi/"&MID(B2,18,30)&"/mqdefault.jpg"
I like to use this formula in a temp column, then do a Copy => Paste values into the column I’ll actually use in Composer (Column C below). Plain text is always faster / easier to process than formulas, and once we have this Thumbnail URL, there’s no need for the formula anymore. See Excel below, before I deleted my temp column that I didn’t need anymore after the paste value.
And voilà! A fast-loading image collection that when an image is clicked will open and play the corresponding YouTube video.
You can download this light sample here: YouTubeThumbnails-Sample.zip (8.8 MB)
As you can imagine, the full sample will look much more like Intuiville and will have vertical / usages filter to browse these 78 videos in a much more friendly way. Stay tuned for its release!
