English  Italiano  Français  Español  Dansk  Deutsch  Deutsch  Português  Suomi 
Video Lightbox

How can I add lightbox video viewer on the page?

Mar 18, 2014

Q: I cannot get the video to load on my page.
where can I find the best tutorial?

A: To install the Video LightBox into your html page:

1) open the page in your program
2) open html source code of the page
3) add several rows of code:

Copy code for the HEAD section and paste it inside the HEAD section of you own webpage, for example:

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

Copy code for the BODY section and paste it inside the Body section of you own webpage in the place where you want to have a gallery, for example:

<!-- Start VideoLightBox.com BODY section -->
<div id="videogallery">
<a rel="#voverlay" href="http://www.youtube.com/v/n9-8UsJ-cpc?autoplay=1" title="Manchester United vs Chelsea Penalty shootout 2008">
<img src="data/thumbnails/0.png" alt="Manchester United vs Chelsea Penalty shootout 2008"/><span></span></a><a id="videolb"
href="http://videolightbox.com">Video In A Lightbox by VideoLightBox.com v1.6</a>
<!-- End VideoLightBox.com BODY section -->

Copy 'data' folder with images and video files and 'engine' folder with .css and .js files into the same folder with your own webpage.