Learn how to create a video gallery using the Youtube API with ASP.NET and Bootstrap modal
We are in the 3rd article of the series about Youtube API. The articles are:
- Load a single predefined video
- Load a custom video with the Youtube API in ASP.NET
- Create a video gallery with modal using ASP.NET and Bootstrap (this article)
We saw in the previous how to load a custom video from the backend using ASP.NET. For this one we will use the same approach to create our gallery, plus Bootstrap for the modal.
The player
We will need to put the player we saw on the first article in the Bootstrap modal, as it’s shown below.
The Javascript
There are 2 scripts to be used. The first one is the general script, which I've shown in the previous articles and it didn't change. The second one is the script below, which will handle the video gallery.
The View
As you saw in the javascript above we are using only one modal. The magic happens in the code below, where I am passing all parameters via data-* attribute. I am using the same Model from the previous article.
As you can see there is no mystery on working with Youtube API and ASP.NET. And the next article will show how you can detect the state of the videos, which is very important for tagging and user interaction.
Check the full code here: https://github.com/davidsonsousa/YoutubeAPI