SublimeVideo

Present your video in a floating lightbox

SublimeVideo’s integrated lightbox displays your videos in a floating player.

While it is possible to integrate SublimeVideo with other lightbox libraries (you’ll need to use our JavaScript API for this), we highly recommend using SublimeVideo’s integrated capabilities described here to get the easiest and best possible lightbox integration for your videos.

Here is the HTML code needed to obtain the lightbox effect:

1<a class="sublime" href="http://yoursite.com/video-mobile.mp4">
2  <img src="http://yoursite.com/video-thumb.jpg" alt="" />
3</a>
4<video style="display:none" class="sublime lightbox" width="640" height="360" poster="http://yoursite.com/video-poster.jpg" preload="none">
5  <source src="http://yoursite.com/video.mp4" />
6  <source src="http://yoursite.com/video.webm" />
7</video>

Important notes:

• The <a> element must be present and adjacent to the <video> element in order for the lightbox effect to work properly.
• Please be sure there is no HTML element (even a <br />) between the <a> and the <video>.

Other notes:

The first 3 lines represent the “clickable thumbnail”:

Line 1. You need to set the sublime class in the <a> element. Also, we recommend linking directly to a MP4 source (href attribute) to enable compatibility with mobile devices where the lightbox effect is currently not supported.

Line 2. Here we used a separate image as the thumbnail (video-thumb.jpg). But if the size of the poster frame (line 7.) is not too big, you could directly link to it in the src attribute of this <img> element. In the live demo page we also added a <span> element just below the <img> to superpose a small magnifying glass icon on the thumbnail (you can find instructions below on how to do this).

The <video> element (lines 4-7) is very similar to the one we previously described in the Write <video> elements page except for two changes:

Line 4.

• It needs to be initially hidden.
• It needs the lightbox class (in addition to the sublime class).

Optional: Add a magnifying glass icon over the thumbnail

If you want to add a magnifying glass icon over the thumbnail, you can use the HTML and CSS code below:

HTML Code

1<a class="sublime zoomable" href="http://yoursite.com/video-mobile.mp4">
2  <img src="http://yoursite.com/video-thumb.jpg" alt="" />
3  <span class="zoom_icon"></span>
4</a>
5<video style="display:none" class="sublime lightbox" width="640" height="360" poster="http://yoursite.com/video-poster.jpg" preload="none">
6  <source src="http://yoursite.com/video.mp4" />
7  <source src="http://yoursite.com/video.webm" />
8</video>

Additional code is composed of the zoomable class (line 1) and a <span> element (line 3).

CSS Code

a.zoomable {
  display:block;
  width:180px;
  height:76px;
  background:#000;
  position:relative;
  -webkit-box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
  -moz-box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
  box-shadow:rgba(0,0,0,0.4) 0 4px 10px;
}

a.zoomable span.zoom_icon {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url(sv_zoom_icon.png) no-repeat bottom right;
  opacity:0.3;
  -o-transition:opacity 0.25s;
  -moz-transition:opacity 0.25s;
  -webkit-transition:opacity 0.25s;
  transition:opacity 0.25s;
}

a.zoomable:hover span.zoom_icon {opacity:1}

Note: The icon can be found here.

Demo

You can see this feature in action on this page.