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

Can I add jquery video upload and easyHTML5Video on the same page?

Jul 19, 2013

Q: How can Videolightbox be used together with easyhtml5video.

I encode diff. files for all e-devices, but videolightbox only handles one file.

How can I ensure that my videos can be seen be all different types of e-devices?

A: At first, 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: 

<head>
...
<!-- 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 -->
...
</head>



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:

<body>
...
<!-- 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>
</div>
<!-- End VideoLightBox.com BODY section -->
...
</body>



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

Then you should install the EasyHTML5Video into your html page:
1) Add your video, tune settings and press 'Start' button
2) Publish it on a local drive in any test folder
3) Open index.html file from the saved folder in any text editor (Notepad for example)
or you can:

- open index.html page in any browser
- right click on the page
- select view source of the page.

You'll find folder with project files in this saved folder also.

4) Copy code for Easy Html5 Video BODY section and paste it inside the Body section of you
own web page in the place where you want to have a video, for example:

<body>
...
<!-- Start EasyHtml5Video.com BODY section -->
...
<!-- End EasyHtml5Video.com BODY section -->
...
</body>



5) You should upload project folder with all files generated with the html5 video app
into the same folder with your own webpage.

6) Preview your website in the browser.

Recent Questions »

Related