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:
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.
- Video Size: This simply allows you to choose the size that your video will appear on your website, you can chose from one of the preset sizes or select a custom size (if you choose this option bear in mind that you will need to get the ratio right or your video may appear out of proportion).
- Show Suggested video when the video finishes: This one is fairly self-explanatory, it simply allows you to select whether you want YouTube to suggest similar videos whne your video has finished playing.
- Enable privacy-enhanced mode: Enabling this option means that YouTube won’t store information about visitors on your web page unless they play the video.
- Use old embed code: Some sites only support the old embed code, so if a site rejects the new embed code, check the Use old embed code option under the embed code, which will generate a code that begins with ‘<object…’.
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:
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:
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!
