In todays Custom Interaction experiment I’m going to show you how to create a custom YouTube gallery that will change the video when a video thumbnail is clicked.
This entire setup uses a single Custom Interaction, the data() short code and a class.
The Video Bric
I’m just using the standard video Bric in this experiment, however, it’s important to note that I have applied an ID to the video iframe (my-video), this is done so that I can target the player with my Custom Interaction.
The Title
I have also applied an id (video-title) to the Header Bric.
Classes
Not much in the way of classes here, just a class I toggle on the currently selected video which applies a border.
The Interaction
This Interaction is pretty straightforward.
- The first rule will set the video title (#video-title) text using the data() short code which will be populated with the data attribute data-vid-title from the trigger element.
- The next rule will set the src attribute of the iframe (#my-video) video player using the data() short code which will be populated with the data attribute data-vid-url from the trigger element.
- This rule removes the selected-vid class from all of the thumbnails using their ids.
- Finally we apply the selected-vid class to the trigger element using the data() short code which will be populated with the data attribute data-item from the trigger element in order to target it.
The Thumbnails
Finally I setup the video thumbnail images. Each thumbnail has a unique ID which is used in conjunction with step 3 from above. 
Next I have set each image to trigger my custom interaction when the image is clicked.
And I have added all of the required data attributes on the image
- data-vid-url = Populated with the YouTube video url.
- data-vid-title = Populated with the video title.
- data-item = Populated with the image unique id.
Remember the values for these data attributes will change for each thumbnail.
That’s it. 
I now I have a custom built YouTube gallery that uses a single video Bric to play multiple videos thanks to a single Custom Interaction and the data() short code. 
You can download the experiment below and have a play around.
Youtube Video Gallery.bloc (225.3 KB)
Have fun and a great weekend! 
