Show YouTube video in a modal using the API Data Source

I have successfully created a video gallery from a YouTube channel using API Data Source. All works well with the exception that I would like to show the video in a modal instead of leaving the site to go to YouTube.

Before I re-invent the wheel, I would like to know if anyone else has developed this. The idea is to have just one modal that gets dynamically populated.

The page that I am referring to is https://accufire.com.au/gallery.php

The idea of using just one modal can be seen at https://bunchokids.org/videos.php

Have spent some time on this without a satisfactory result. Please have a look at https://accufire.com.au/test.php

What I have done:

  1. created an API Data Source
  2. created a Data Detail based on 1.

Problem:
On-click event on the image does not select the ID for the Detail Data.

Any assistance is greatly appreciated.

@brian spurred me on to continue working on this, here is the result https://accufire.com.au/gallery.php

Thank you so much Ben!

So what was the exact issue Ben? Have you just used a wrong “key” binding for filtering the data source?

That was the exact problem @Teodor, I kept using the id.videoId. Once I started using etag, all was well.

Another problem I had was the thumbnail source. Using snippet.thumbnails.url did not work, it had to be snippet.thumbnails.default.url where default can be interchanged with medium and high.

The only piece of code that I had to add by hand was for closing the modal. For the rest, a beautiful solution compared to what I used to have pre Wappler.

2 Likes