Adding a Youtube Video to your BT Community Website

In the following example we are going to insert a ‘Youtube’ video between two paragraphs and centre it on the page.

First of all select the page you wish the video to appear on and click on the ‘Edit’ button, to bring up the ‘Edit Content’ window.

Place your cursor at the end of the first paragraph and press the ‘Enter’ key a couple of times to create a line break. Next type the word Video, and press ‘Enter’ again, to create another line break before the next paragraph. Finally highlight and centre the word Video. You should have something like this.

Update and Save your page.

We now have the word Video between the two paragraphs on our webpage but we wanted the actual video. This requires us to add a little, of what is known as, HTML Code. Don’t panic we don’t need to know what HTML code is? Just where to find it and how to add it to our page?

1 JCH

Here’s HOW!

Open a new tab or window in Internet Explorer, go to ‘Youtube’ and locate your video.

Just beneath the video there are three buttons, click on ‘Share’. Then click on the ‘Embed’ button that appears a couple of lines below.

Share Button

Embed Button

Options

Sizes

A little further down there are some options and sizes to choose from. Simply select or de-select the options as required and I suggest you select 640 x 510 for the size.

Now the clever bit, notice that strange highlighted text between the ‘Embed’ button and the options. That’s the HTML code we need! Press the Ctrl + C keys together on

2 JCH

your keyboard to copy this into the computers clipboard memory and then return to the window or tab containing your webpage.

3 JCH

Open the ‘Edit Content’ window again by clicking on the ‘Edit’ button.

At the bottom of this window, click on the ‘HTML’ button and the text in the main content area of the window will change to HTML.

HTML Button

It will look something like this.

<h1>Welcome to the site editor</h1><p>Each different section of the page can be edited by clicking the 'Edit' button. Changes can be saved by clicking any of the save buttons located within the edit area, or on the ribbon at the top of the page.<br /><br /></p><div style="text-align: center;">Video<br /></div><p>Further help can be reached by placing your mouse pointer over the <img alt="" width="16px" height="16px" src="/Images/help.png" /> buttons. A dedicated help section is also provided and accessed through the main site.</p>

The line we are interested in is <div style="text-align: center;">Video<br />

Highlight just the word ‘Video’ (as above). Now press Ctrl + V keys together on your keyboard to paste the code we copied from ‘Youtube’ in place of the word Video.

Update and Save your page.

Job done, we now have our video on our webpage.

4 JCH