By RobElliott
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:
Step 2 - SaveTube
Go to http://www.savetube.com and paste the url into the box:
Press the Go button then scroll down until you see the green download box and press download:
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):
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.
It downloads a zip file which you should unzip. It creates a folder called called mediaplayer and the files inside it are shown below:
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:
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 #:
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:
(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!
Need help. I uploaded the files player.swf, swfobject.js to my page and pasted the code below and does not work. However if you replace the addresses to http://strathviewconsultants.wikidot.com/music:caledonia, works there. What am I doing wrong?
Thanks,
Code:
Vídeo do Vimeo 2