JW Box is a small JavaScript LightBox for the JW Player. It is responsive, and works in Flash and HTML5 environments.
First, the file jwbox.js needs to be loaded in the page's <head>, like so:
<script type="text/javascript" src="jwbox.js"></script>
Then, the LightBox needs to be loaded when the page loads, like so:
<body onload="setupPlayer();">
It can also be loaded like this, if you prefer:
<script> window.onload = setupPlayer(); </script>
Then, for each link, or graphic, that you want a lightbox to appear when clicked on, you need to add the a call to a function called playVideo(), onclick:
onclick="playVideo('sample_video.mp4','sample_image.jpg'); return false;"
You just need to put in the video you want to play, and the poster image you want to use. If you do not have a poster image, you don't need to list one.
Update - There is a 3rd, optional, argument now. You can specify Flash, as the 3rd argument, if you wish for the player to render in Flash mode instead of HTML5 mode. By default, HTML5 mode is used. The example below has been updated so the first item renders in Flash mode.
2015 Update - There are options to be able to drag and resize the lightbox now. Supported in all desktop browsers other than IE. If the 4th optional argument is set to drag, then the player will drag. If the 5th optional argument is set to resize, the player can be resized. The example below has been updated so the last item can be dragged and resized.
That's it!
<!DOCTYPE html>
<html>
<head>
<title>JW Box - A JW Player LightBox</title>
<link rel="icon" type="image/x-icon" href="http://www.jwplayer.com/wp-content/themes/jwplayer-104/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jwbox.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
}
</style>
</head>
<body onload="setupPlayer();">
<h3>JW Box - A JW Player LightBox</h3>
<a href="#"><img width="500" height="300" border="0" src="http://content.bitsontherun.com/thumbs/i8oQD9zd-480.jpg" onclick="playVideo('http://content.bitsontherun.com/videos/i8oQD9zd-kNspJqnJ.mp4','http://content.bitsontherun.com/thumbs/i8oQD9zd-480.jpg','flash'); return false;" /></a><br /><br />
<a href="#"><img width="500" height="300" border="0" src="http://www.longtailvideo.com/jw/upload/bunny.jpg" onclick="playVideo('http://www.longtailvideo.com/jw/upload/bunny.mp4','http://www.longtailvideo.com/jw/upload/bunny.jpg'); return false;" /></a><br /><br />
<a href="#"><img width="500" height="300" border="0" src="http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg" onclick="playVideo('http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4','http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg'); return false;" /></a><br /><br />
<a href="#"><img width="500" height="300" border="0" src="http://content.bitsontherun.com/thumbs/6O7cYVpH-480.jpg" onclick="playVideo('http://content.bitsontherun.com/videos/6O7cYVpH-1ahmry41.mp4','http://content.bitsontherun.com/thumbs/6O7cYVpH-480.jpg'); return false;" /></a><br /><br />
<a href="#"><img width="500" height="300" border="0" src="http://content.bitsontherun.com/thumbs/zhiesZIW-480.jpg" onclick="playVideo('http://content.bitsontherun.com/videos/zhiesZIW-52qL9xLP.mp4','http://content.bitsontherun.com/thumbs/zhiesZIW-480.jpg','drag','resize'); return false;" /></a><br /><br />
This is some content.<br />
This is some content.<br />
This is some content.
</body>
</html>
The source code is available for this script. There is just a .js file for JavaScript. Publishing the JavaScipt can be simply done with any text editor. Enjoy~! :)