Articles: Tips: How to embed a YouTube Video
Date Added: 29/04/2014 @ 6:26pm
A lot of our websites use a Content Management System (or CMS) which allows you to update the website yourself. This kind of system not only gives you more control over your website, but also saves you money in the longer term because you don't need a web developer for every update - especially when it's only a minor update.
In fact, a well designed content management system will let you go way beyond making simple text changes including allowing you to add both pictures and indeed videos.
Most of our websites use a plug in called CK Editor, which is what we are referencing in this article, but most editors will work in a similar way. So this is a quick guide to embedding a video from YouTube in the main text of your website:
How to embed a You Tube Video
- If you haven't done so already, you will need to set up a YouTube account and upload your video or videos to that account. The rest of the instructions assume that you have done this already, or are embedding a video that is publicly available.
- Log in to the admin section of your website where you want to embed this video (e.g. Page Admin) and go to the page or article in which you wish to insert the video.
- In a new window (or tab), go to the page on YouTube where your video is accessible by the public (e.g. http://www.youtube.com/watch?v=tgbNymZ7vqY).
- Under the video on this page click on the "Share" button.
- In the panel that appears, click on the "Embed" button.
YouTube provide options below the code that allows you to select the size of the video, as well as some colour options.
- Copy the code that appears in the box that appears. It will look similar to this:
Note: You can safely remove the frameborder="0" and allowfullscreen parts of the code, but don't do so if you are unsure.
- Go back to your original window or tab (you can close the YouTube window/tab if you are finished with it).
- In the text editor, click on the "Source" button. This will show you the HTML code for the page.
- If you are unfamiliar with HTML, scroll down to the bottom of the box using the scrollbars on the right and paste the code from YouTube after the last
or tag. If you are more familiar with HTML select where in the page or article you want the video to appear.
- Click the Source button again to go back to the rich text editor.
- Use the scroll bar to scroll down the page where you will see the video embedded in the text. Save the changes in the same way you would for a page/article without a video.
More information and instructions about CK Editor can be found here.
These instructions were correct when they were written, but as with all 3rd party websites, the way that YouTube works will change over time. So we can't guarantee how long these instructions will remain correct.