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:
- Load a single predefined video (this article)
- Load a custom video with the Youtube API in ASP.NET
- 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.
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:
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.