Ewisoft Website Builder
Powerful and Easy Website Builder

Search:  

Search Bar
Image Slider
Google Web Fonts
Video Album


PayPal Verified

Website Builder Video Album

Add a video album to showcase your movies or events on your website using Video LightBox.
* These add-ons are from a 3rd party therefore we are not responsible for how they will work. We are also not able to provide technical support for them.

View it on our Demos page

Step 1:

  • Download and install Video LightBox on your computer.
  • Add the movies you want to use into the tool by following their instructions. Configure the settings you wish to have.
  • In Video LightBox, on the Publish screen, select Publish to folder so that the files and folders are generated onto your computer.
  • Select where the files are to be generated so you can remember where to find them because you will need to upload them to your web hosting server.
  • Click the Publish button in Video LightBox and a page should open with the video album showing and working.

Step 2:

  • After you have seen it working on the previewed page the way you like then you will need to upload the Video LightBox generated files and folders up to your web hosting server.
  • Sign into your web hosting control panel and navigate to the File Manager where you can upload files. Another method to upload your files is by using an ftp program like FileZilla which you can download for free from FileZilla's website.
  • Upload the 2 folders that Video LightBox generated called data and engine to your web hosting server's website folder.

Step 3:

  • On your previewed page from Video LightBox, select in your browser to View Source so that you can copy the codes for the head section.
  • In Ewisoft, right click (left windowpane) the page you want to put the video album and select Properties > Script.
  • Paste the code before </head> tag and change where it is marked in red for where you uploaded your files to.

<!-- Start VideoLightBox.com HEAD section -->
<link rel="stylesheet" href="http://www.yoursite.com/engine/css/videolightbox.css" type="text/css" />
<style type="text/css">#videogallery a#videolb{display:none}</style>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/engine/css/overlay-minimal.css"/>
<script src="http://www.yoursite.com/engine/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="http://www.yoursite.com/engine/js/swfobject.js" type="text/javascript"></script>
<!-- make all links with the 'rel' attribute open overlays -->
<script src="http://www.yoursite.com/engine/js/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->

Step 4:

  • On your previewed page from Video LightBox, select in your browser to View Source so that you can copy the codes for the body section.
  • In Ewisoft, click to edit your page where you want the video album to appear.
  • Select the HTML tab and paste the code and change where it is marked in red for where you uploaded your files to.

<!-- Start VideoLightBox.com BODY section -->
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("video_overlay");
ytplayer.setVolume(100);
}
</script>
<div id="videogallery">
<a rel="#voverlay" href="http://www.yoursite.com/engine/swf/player.swf?url="http://www.yoursite.com/data/video/yourvideo.flv&volume=100" title="yourvideo"><img src="http://www.yoursite.com/data/thumbnails/yourvideo.png" alt="yourvideo" /><span></span></a><a id="videolb" href="
http://videolightbox.com"> Video in Popup by VideoLightBox.com v1.10</a>
</div>
<!-- End VideoLightBox.com BODY section -->

  • In Ewisoft, click Preview to view your pages.

Products

Website Builder

Support