Embedding YouTube Video Content

Threespot Support

Here is the procedure to get a You Tube clip placed onto your site:

To do this, we’ll be going through the standard article editing procedure, so, make sure you have the article that you want to add the video to open in the SWEB editor, as if you were going to make any other type of edit.

1. With another browser window/tab, open YouTube and find the video you want to add.

2. Once the clip has loaded and is playing, you will notice some information just to the right of the video player. Locate the “Embed” field, which will have a small line of code in it. In the screenshot below, this is the area highlighted in pink.


Click for larger view (opens in new window)
The embed code you've copied out will look something like:

< object height="350" width="425" >
< param value="http://www.youtube.com/v/JEkIuJ7bX2M" name="movie" >
< param name="allowFullScreen" value="true" >
< embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/JEkIuJ7bX2M" height="350" width="425" >
< /object >

3. To embed the video on your site, just copy the code from the Embed box, then paste it into the HTML code view for the article you want it to appear in. So, just copy this code, switch over to your SWEB editor window, switch the editor into Code View by selecting the “<>” button located at the bottom left of the article editor window. Locate the correct location in your code and paste in the contents copied from the YouTube page.

4. You'll need to add two things to the embedded code to allow it to work trouble-free. These changes stop the YouTube Flash movie from playing over top of your editing elements when you're working on a page with embedded video.

Once you've pasted the code into your article, examine it. Find the part that reads:

< object height="350" width="425" >

and immediately thereafter put in

< param name="wmode" value="transparent" > < /param >

so it looks like:

< object height="350" width="425" >
< param name="wmode" value="transparent" > < /param >

Then look for

< embed type="application/x-shockwave-flash"

and immediately thereafter put in

wmode="transparent"

so that it looks like:

< embed type="application/x-shockwave-flash" wmode="transparent"

5. After pasting the YouTube code, your editor preview should now include the clip in your page. Assuming it’s where you want it, sized correctly, etc., save/publish the article and that should do it.

6. If you need to change the size the clip is appearing on your page, you can do so by changing the width/height values in the code:

< object width="425" height="350" >< /object >

You can make it whatever size you want, but be careful to reduce/enlarge proportionally, otherwise, your clip can appear skewed. Also, make sure you change every occurrence of the size values so that they are consistent or the clip may not load correctly. Note that the size parameters appear twice in a YouTube video code: once inside the object tag and once inside the embed tag. You'll need to change both pairs of height and width parameters to get the video to appear correctly in all browsers.

When resizing, keep in mind that the maximum width of a three column page template, or homepage template is 398px, and the YouTube default is 425, so if you plan to insert your video on your homepage or any page using the three column page template, you will need to resize the video to fit.

 

Finally, YouTube offers the ability to NOT include related content into the embedded video feed. The option is accessed through the customize link, found in the video embed panel on YouTube.

In order to prevent YouTube from displaying related content, which is often inaccurately identified as related to yours, do the following before you copy the contents of the “Embed Code” field:

1. Locate the video on YouTube that you want to include, as usual

2. BEFORE you copy/paste the Embed URL, select the 'Customize' link, which appears directly above the embed URL field

3. SELECT the “Don't include related videos” option

4. AFTER selecting this option, copy/paste the embed URL into your content, as usual


Click for larger view (opens in new window)
This will embed the desired video on your site but, will NOT allow YouTube to show links to videos it feels are related to yours after the original video has finished running.