Embedding a YouTube Video on Your Website

Videos are handy for a number of reasons. Whether they are there to provide instructions, introduce a new product or simply just to show fluffy animals doing stupid things; they can be a valuable addition to your website. Embedding videos on your website, rather than linking to one that is hosted elsewhere, means that your readers can view them without leaving your website as well as giving you the opportunity to create extra content on your site, which we all know search engines like to see.

So you've already got your video uploaded to YouTube, or you are planning on using someone else’s video (with their permission of course), but how do you embed that video into your website for your visitors to see?

How to Embed a YouTube Video on Your Website

Step One

First of all, you need to upload or find the video that you want to use on YouTube. Once you have found it look below the video to see the sharing options. By default you are shown the social sharing options allowing you to post the video directly to your favourite social network but in this instance we want to embed the video on your website so click on Embed and you should see something like this:

How to embed a YouTube video on your website step one.

Step Two

Once you click on the Embed link you are presented with a snippet of code. This is the code that you will use on your website to embed the video but, before we proceed, there are some options that we can choose from.

embedding a youtube video on your website step two

Step Three

Once you have set your preferences it's time to copy the snippet of code to the clipboard by highlighting the text and pressing Ctrl + C on your keyboard. Once you have done this you can head over to the page of your website that you want to add your video to. For the purpose of this exercise I will assume that you already know how to edit the content of your page using Ballyhoo Refresh, Ballyhoo Commerce or which ever content management system you are using.

Step Four

In this step we want to edit the HTML of the page that we want to add the video to. In Ballyhoo systems there is a small button at the bottom right hand side of the editing window:

How to Open the HTML Editor

Step Five

Once you have clicked the button to edit the HTML source a window called the HTML Source Editor will pop up allowing you to edit the source code. Locate the point in the page that you want your video to appear and insert the text that you previously copied to your clipboard. Let's say, for example, I want my video to appear at the bottom of my post - to do this I will scroll down to the end of my last paragraph and insert the text just below it:

Add the copied HTML into the HTML source editor

Congratulations

There you have it, your video should now be embedded on your website (you may need to refresh the page before the video will appear - to do this quickly just press F5 on you keyboard). Getting your video to appear exactly in the right position may be a little tricky so have a play around with where you put your code. Any extra styling - centring your video, adding a border, getting your video to start at a certain point or having your video automatically play when someone lands on the page - may require input from an experienced developer so feel free to get in touch if you get stuck and we'll see if we can help.

And now, the moment you've been waiting for... the finished embedded video. I know you've being dying to see a confused fluffy kitten - just press play!

Sam Bispham

By Sam Bispham

Sam is Ballyhoo's online marketing expert, managing online marketing strategies big and small for our customers.