Show A YouTube Video Saved On Your Page

By RobElliottRobElliott

Description

Usually you embed a YouTube video that links back to Youtube. However, it is possible show a YouTube video that has been saved locally in your wiki page.

Step 1 - YouTube

Go to youtube and copy the url of the video as shown below using ctrl+c or by highlighting the full url, right-clicking and selecting copy:

url.png

Step 2 - SaveTube

Go to http://www.savetube.com and paste the url into the box:

savetube.png

Press the Go button then scroll down until you see the green download box and press download:

download.png

A dialog box will open, make sure save file is checked then press OK.

Step 3 - Rename Video

The file will be saved with the name "get_video" and you should navigate in Windows to the download location and rename it. In this example we will call it caledonia.flv (make sure you add the .flv):

rename.png

Step 4 - Upload Video to Wiki

The next step is to upload the FLV file caledonia.flv to the wiki page.

Step 5 - FLV Player Files

Go to http://www.longtailvideo.com/players/jw-flv-player/ and enter your email address and download the flv player.

jw.png

It downloads a zip file which you should unzip. It creates a folder called called mediaplayer and the files inside it are shown below:

folder.png

You should upload to your wiki page the swfobject.js file and the player.swf file. Once you have done this the filelist on your wiki page should look like this:

files.png

Step 6 - HTML Code and Wiki Syntax

You then need to put HTML code on your site. Squark has kindly provided this on his site at http://squark.pl/dev:9 and it is also shown below. Copy all of it to your wiki page.

Once you have put the copied code into your wiki you will need to edit it so that it shows the correct page references for the files you uploaded to your page and shows the correct name for the flv file:

[[collapsible show="Show HTML" hide="Hide HTML"]]
[[code type="html"]]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FLV Player</title>
</head>
<body>
<p id='preview'>Preview</p>

<script type='text/javascript' src='http://strathviewconsultants.wikidot.com/local--files/music:caledonia/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('http://strathviewconsultants.wikidot.com/local--files/music:caledonia/player.swf','player','200','150','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=http://strathviewconsultants.wikidot.com/local--files/music:caledonia/caledonia.flv');
s1.write('preview');
</script>

</body>
</html>
[[/code]]
[[/collapsible]]

You then reference the code inside an iframe as follows:

[[iframe http://strathviewconsultants.wikidot.com/music:caledonia/code/1 frameborder="0" scrolling="no" width="400px" height="300px"]]

Step 7 - Changing the Look of the FLV Player

You can change the look of the FLV player on your wiki page by adding parameters after the filename as I have done below. You use the hex colours without the #:

colour.png

Other parameters are &frontcolor and &lightcolor and you can also change the width and height by changing the numbers in the red box shown below:

size.png

(the 9 after the width and height refers to the flash player version and should not be changed).

One thing to bear in mind in that when changing the html on your page is that you will need to clear your cache and refresh the page before you see the changes. This is particularly true in Firefox due to the way it handles swf files but might also be a necessary step in IE as well.

In Action

The finished result is also at http://strathviewconsultants.wikidot.com/music:caledonia


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by RobElliott

Sproutbuilder - 16 Feb 2012 01:44
Slideshare - 16 Feb 2012 01:42
PollDaddy - 16 Feb 2012 01:32
Mibbit - 16 Feb 2012 01:21
Jotform - 16 Feb 2012 01:14
Google Translate - 16 Feb 2012 01:06


Rate this solution

If you think this solution is useful — rate it up!

rating: +2+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License