jQuery Videolightbox

http://videolightbox.com/

Instructions

In YouTube

1. Select your video and click the share button and copy the url that is given

peter.jpg

In VideoLightbox

2. Paste the url into the box in the Add Video tab and cick the Add Video button.
3. Go to tab 2 Customise Thumbnails. And select the settings you want. This is for the thumbnail only, not the video. In this caser we'll select Shadow but keep all the other settings as default.

vlthumbnail.jpg

4. Go to tab 3 Customize Video. Select the template; in this case we'll use Dark Glass and set the video resolution to 480x360. We'll set the overlay shado wot a hex value of #888888.

vlvideo.jpg

5. Go to tab 4 Publish. Make sure Publish to folder is selected and enter the folder on your computer where you want to save the files. Then click the Publish button. A local browser will open and you can test the video. Do not close the local browser yet as you will need to copy the page source code.

You can now save the videolightbox settings for this video by clicking the image of a floppy disk. Close videolightbox.

In Windows Explorer

6. You will see that several folders have been created:

explorer.jpg

In your wiki page

7. Upload all the files in the data -> thumbnails folder to the wiki page.

8. Upload all the files in the engine -> images folder to the wiki page.

9. Upload all the files in the engine -> js folder to the wiki page.

In the engine -> css folder

10. Right click the overlay-minimal file and open with Notepad or Wordpad. You will now need to change the 3 urls in this file so they point to the files on your wiki page:

overlay.jpg

11. You will then need to add some extra CSS to the overlay-minimal file. In the div#voverlay rule before the closing } add
top: 10px !important;

12. Then immediately after the closing } add:

img { top: 10px !important; }
.overlay { color: #ffffff !important; }

So the top of the file looks like this:

overlay-complete.jpg

NB: After writing the instructions I changed the height property to 240px so the video fitted better over the grey background.

Then save the file.

13. Upload all the files in the engine -> css folder to the wiki page.

In the local browser preview

14. Earlier on you left open the local browser showing the preview of the video (if you didn't, open the index html file in the root folder)

explorer.jpg

You will now need to copy the complete page source code to your wiki page(ctrl+a then ctrl+c). In Firefox this is in the View menu.

In your wiki page

15. Paste the source code into your wiki page and wrap [[html]].. [[//html]] tags round it:

Show html

16. You will now need to alter all the urls in this code to show the correct location of your files. This is necessary because videolightbox is expecting that you will have uploaded the files to your server via FTP with a folder structure. We don't have this at Wikidot so altering the urls is required. I have changed the code below to reflect the location of the files on this support page:

wikihtml.jpg

17. Finally, on the line before the <body> tag add

<div style="min-height:350px;">

Then on the line after the </body> tag add:
</div>

Depending on the size of video you selected in point 4 above you might need to change the min-height property to a larger size.

The full html is shown below:

Show html
Page tags: jquery video
page_revision: 187, last_edited: 1275816153|%e %b %Y, %H:%M %Z (%O ago)
EditTagsDiscuss (2) History Files Print Site tools+ Options
Site Design and Content by Strathview Consultants copyright 2009-2010