How to add a YouTube video to a web page

30 September, 2008

Everyone has heard about YouTube these days. It is probably one of, if not the most successful IT start-up in recent years. It proved to be extremely popular with the Internet public, and as such it was bought by Google for several billion dollars, making its founders very rich in the process.

But, history aside, YouTube do something which is very handy for us web developers, and that is that they make their videos very easy to put into your own web pages.

Thank you YouTube.

Adding a YouTube video to your web page is very easy. YouTube provide you with the code you need on the video viewing page! (Provided the uploader of the video has enabled that option)

Before copying the code provided, there is the option to make a few customisations. The customisations can be accessed by clicking the little cog icon at the end of the "Embed" field. Customisations such as the colour of the player, whether or not to show the border, and whether or not to have related videos at the end are available.

Once the correct combination has been chosen, select all the code in the "Embed" box. This is the code we will put into our web page.

Now comes the second step: putting this code onto your web page. You can put the code just about anywhere and it will be OK. However, you will probably want to position the video neatly into your design, so wrap it in the appropriate tags so it will display as you want. Then, simply paste the code into your document.

And that is about all there is to it. The YouTube video will now be embedded into your web page. Feel free to play around with the positioning and layout of the video by manipulating your own code, and try several of the colour options to get the one that fits your colour scheme the best.

Here is an example we have used. This video is from our friend Blake Haswell. Thank you Blake. We have chosen no border, the darker of the two grey colour options, and we have chosen not to show related videos at the end. Below is a shot of the settings we have set.

Below is the code we got from YouTube which we have integrated into our web page.

And this is what it all looks like at the end.

As you can see, it is a very easy process made simple by YouTube and how they readily provide us with the necessary HTML. Now you can add YouTube videos to your web pages to bring video to your users.

This method carries across to other video sharing sites similar to YouTube as well, as many of those sites offer up the code to embed videos as well.

ferrari_chris