Adding a YouTube video to your website

easy to follow step by step guides


Although video on the web has been possible for a number of years, YouTube has brought it to mainstream attention, with a free, easy to use, instant-play formula. Here's how you can take advantage of this on your website


Every day, thousands of new videos are uploaded to the YouTube website by private individuals. YouTube make no charge for this, but place adverts on their main website.  Many videos are made for fun, captured by friends on mobile phones or webcams, but the convenience of YouTube has become attractive to many businesses too, both large and small. 

Placing a YouTube video on your website

As well as displaying a YouTube video within the YouTube website, YouTube also encourages people to place any video within their own website. This is a little bit of advertising for YouTube of course, but its a great way of adding some video to your own website. In this section, we will explain how you can add a YouTube video to your website, but first please read the footnote about the use of HTML code.

So for example, let's say you have searched YouTube and found a video about meditation you would like to display. Here's a link to it on YouTube's website

Click the above link and you will see the meditation video within YouTube's pages. You will also see underneath the video some options including Share. Click Share to open a link that looks like this:

Highlighted is a link to the video on You Tube's pages, and this could be sent in an email, or put in a Link Note. However, to make the video appear "embedded" within your webpages, you need to click the Embed button as shown above followed by SHOW MORE to reveal this..

Now to specify the size of your video on your page. The first number for Video size is the important one, as this is how wide the video will appear on your page. in this example this is 420. However, this number will often be bigger than this (as in the example below) in which case we advise you to make sure that this number is no greater than 480. How to do that? When you click the down-arrow, you'll get a list of sizes, and a Custom size option:-

  Click Custom size, and put 480 into the left hand box (the right hand one will work itself out for you) :-

...and then click anywhere in the box above this to highlight the new embedding code:-

Now its a simple case of copy'n'paste. From the menu of your web browser select Edit > Copy. Then log into the administration area of your website and go to the page and place within the page where you would like to display the video. To make it easier to read later, put a few blank lines below your last words, then from the menu of your website browser select Edit > Paste. The editor should now look something like this, with the code starting with <iframe> and ending with </iframe>.

Now simply save your changes and go look at your website again. The video should be displayed inside the page.

Why no bigger than 480 wide?

The reason for this is that as long as you stick to a width of 480 pixels or less for your embedded video, it will be compatible with any of our standard website designs. This is important because if you display videos at a wider size, although they may display nicely on your current design, they could cause problems if you switch to another design at a later date. Don't forget as well that your website visitors are easily able to view the video full-screen on their computer, for a closer look...

Making your own You Tube video

Unfortunately the full procedure for making your own YouTube videos is outside the scope of this article, but here are some links to help.

Use of HTML code in webpages

The above method involves pasting HTML code into your website pages. The simple-to-use editor inside your website's administration area was not designed for writing HTML code and, in general, problems can occur when this is attempted. However, this is a small amount of code and should just work as-is, without needing to understand exactly what it means. Unfortunately if you do have problems with HTML code in your website pages, our support team are not trained in diagnosing these problems and would be unable to help. Your best course of action would then be to delete the code you have entered and try again, or simply try another method if available.