Skip to main content

Create a video gallery with modal using ASP.NET and Bootstrap

Learn how to create a video gallery using the Youtube API with ASP.NET and Bootstrap modal

Posted in API, Youtube, Code snippets, Tutorials, ASP.NET, JavaScript

We are in the 3rd article of the series about Youtube API. The articles are:

  1. Load a single predefined video
  2. Load a custom video with the Youtube API in ASP.NET
  3. 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

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

Load a custom video with the Youtube API using ASP.NET

Learn how to load a video from the backend (ASP.NET) using the Youtube API

Posted in API, Youtube, Code snippets, Tutorials, ASP.NET, JavaScript

Let’s continue with this very simple series of articles about the Youtube API. The articles are:

  1. Load a single predefined video
  2. Load a custom video with the Youtube API in ASP.NET (this article)
  3. Create a video gallery with modal using ASP.NET and Bootstrap

On the previous article, we saw how to load a predefined video using the API. It was simple and clean, while we could load only that specific video. In the real world that would be a bit different since we would have to load the video from diferent sources, by using the backend. In this article we will see how we load the from the backend using ASP.NET

The player

We will use a div tag as player, which should be handled by the javascript later.

<div id="player"><div>

The Javascript

We will split this script in 2 parts: The general script, which makes the API calls and the Video script, which actually calls the video.

General script

We use this one just once, as we did before.

Video script

Here is the trick. Since I am using ASP.NET MVC here and I need to have some flexibility since we are using the back end to bring the video, I will need to put the script in a partial view. Also, I am passing the Video model, which should bring all the parameters needed for the video.

Video model

Here is the model I am using. Keep in mind that such model could bring the video data from a database, for example. Or some web service.

That's it.

Next article will be about a video gallery opening a video in a modal window. All of it using videos loaded from the backend in ASP.NET MVC and bootstrap.

Check the full code here: https://github.com/davidsonsousa/YoutubeAPI

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network:

How to use the Youtube API to load a single video

Learn how to use the Youtube API and javascript to load only one video

Posted in API, Youtube, Code snippets, Tutorials, JavaScript

The most common way to embed any video on Youtube is: Click in Share, Embed, copy the code and place in the website. I guess everybody used this at least once but let’s be realistic: This is not the best approach when you are working with clients as you never know what the client is going to ask in the future. It might happen the client will not request anything extra. Or he might ask to record the time the user paused the video.

My idea here is to make a very simple series of 4 articles which should cover the most basic usage of Youtube API. And they are:

  1. Load a single predefined video (this article)
  2. Load a custom video with the Youtube API in ASP.NET
  3. Create a video gallery with modal using ASP.NET and Bootstrap

For this series I am going to use the Youtube API for iframe embeds which forces the HTML5 player and it’s better for compatibility with mobile. You will find the code to download in the end of the article.

The player

When embedding a video we normally get a code like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/XdlmoLAbbiQ" frameborder="0" allowfullscreen><iframe>

However, since we are going to use the Youtube API, we will need a very simple code:

<div id="player"><div>

The Javascript

Here is where the magic happens. The javascript code will load the video we want and replace that div with the proper embed code. However, I will split this script in 2 parts.

General script

This script is used only to make the API calls. Note that we are using this approach since we still don’t have full support for async javascript calls straight from the script tag, so this script should take care of this for us. We need to call it just once.

Video Script

After setting the API call we need to load the video and the way we will do that is also through javascript. So far, in this example, all we will need is the video dimensions (height and width) and also the ID. We will set this up in the function onYouTubeIframeAPIReady(), which is executed once the API is ready to be used.

That’s it for now. In the next article I will show a very simple way to load a custom video. And for that I will use ASP.NET to simulate some database retrieval. But you can use your language/framework of choice.

Check the full code here: https://github.com/davidsonsousa/YoutubeAPI

Did you like the article?

You can subscribe and get them as soon they are online, share using the buttons bellow or leave a comment.

And you also can share using your favorite social network: