How to add a YouTube video to your website

Embedding YouTube videosAdding a YouTube video to your website as an ’embedded’ object is far better than a simple link, it is more likely to be played and can act as part of your page content. The video will have a ‘poster’ image (usually a selected frame from the video), a central play button and controls at the bottom to allow further adjustments to playback. Getting it on your website is not always straightforward – hopefully this guide will help.

What type of website do you have?

Depending on the way your website is controlled, there are different ways to add embedded video. Your whole website or specific pages may be static (not editable by you), have a bespoke content management system (built by your web developer) or be build on a standard platform (such as WordPress).

Static (non editable) web pages/sites

Quite simply you can’t add the video yourself. You will need to ask your developer to do this for you. You will need to send over a link to the video and any instructions regarding placement, size and any supporting content you may wish to feature. We would strongly recommend you ask your developer to disable ‘related videos’ from being shown at the end of the video, as these could feature unrelated videos or even your competitor’s videos. A good developer may be able to add a custom poster image (the static image that shows before the play button is pressed) and will also test the new video content for compatibility with different web browsers and mobile devices.

Bespoke content management systems

The ability to add video will be totally dependant on the capabilities of each system and the level of control you have been granted. If you are unsure, ask your developer if you can use HTML code, specifically the ‘iframe’ tag. If you have this options then visit the YouTube video page, click on the ‘share’ tab underneath the video followed by the ’embed’ tab. Untick the ‘Show suggested videos when the video finishes’ box, to stop other videos being shown after yours has finished playing. You will also need to choose a size that fits in your content area, ideally 640 x 360 or bigger. Highlight the code and copy to your clipboard (Control/Command+C). Your code should look something like this.

<iframe width="640" height="360" src="//www.youtube.com/embed/jSnhw5GkFx8?rel=0" frameborder="0" allowfullscreen></iframe>

Paste this code (Control/Command+V) into the desired page as HTML code. You may need to switch to an HTML mode to be able to do this, don’t just paste it in with normal content as it is unlikely to work. If in doubt ask your web developer. Preview, test and finally publish your page.

WordPress

If you are using WordPress it is worth installing a plugin called ‘iframe’ (see http://wordpress.org/plugins/iframe/). This plugin allows you to use the iframe code generated by YouTube. All you need to do is change just the first and last brackets “<your code >” to “[ your code ]”. The code now would look like this.

[iframe width="640" height="360" src="//www.youtube.com/embed/jSnhw5GkFx8?rel=0" frameborder="0" allowfullscreen></iframe]

Visit the YouTube video page, click on the ‘share’ tab underneath the video followed by the ’embed’ tab. Untick the ‘Show suggested videos when the video finishes’ box, to stop other videos being shown after yours has finished playing. You will also need to choose a size that fits in your content area, ideally 640 x 360 or bigger. Highlight the code and copy to your clipboard (Control/Command+C).

You now need to edit your destination page in WordPress, paste in your amended iframe code (Control/Command+V) and amend the first and last ‘<‘ and ‘>’ to ‘[‘ and ‘]’. If you need to change the size you can use other sizes although they do need to be of the correct ratio. Standard YouTube sizes for widescreen content are 420×315, 480×360, 640×480 and 960×720. You can create custom sizes by dividing both numbers above by the same factor, just make sure the result is a whole number. For example 640×480 divided by two is 320×240. When you are happy with the video preview, publish the page and test well.

There are other plugins such as ‘WordPress Video Plugin’ which may seem a little easier to use, this does however not allow you to turn off related videos showing after the video has finished playing.

Although this may all seem rather technical, it is fairly straightforward and quick to do. As always, if you are unsure about anything, ask your web developer to help.

Share this article

    Add Comment