videolightboxtest2 -- Lightbox2 player --- THIS IS IN THE EDITOR SO SOMETIMES YOU HAVE TO RELOAD A COUPLE OF TIMES TO GET BRIGHTCOVE TO WORK RIGHT

It's sometimes useful to show the player in a "modal" or "lightbox". This can be achieved with just a little CSS and javascript.

CLICK THE PICTURE TO SEE HOW TO LIGHTBOX WORKS

Clicking the thumbnail below will show the player in a lightbox.

This is NOT the Big Buck Bunny Trailer

How this works

The player is inside a div that has a width:0, height:0 and overflow:hidden. This has been used rather than display:none because browsers behave differently when a Flash object is hidden. Some will load it straight away, but others will not load the Flash object until it's displayed and will unload it again when hidden. This way all browsers will load it, normalising behaviour. Furthermore a player created inside a hidden div would display incorrectly on iOS, so this avoids that problem too.

When the thumbnails are clicked this function is called.

function showPlayer() {
  if (modVP) {
    modVP.play(); // Play or resume video
  }
  document.getElementById('lightbox').className = 'show';
  document.getElementById('overlay').style.display='block';
}

The CSS class of the div containing the player is changed to one that sets it's width and height to match the player. An overlay div is shown below the player to obscure the rest of the page. pause(false) is used to play or resume the video. Note that on some mobile browsers (including Mobile Safari) the video will not start playing the first time without the user tapping the video.

When the lightbox is closed by clicking the close link or anywhere on the overlay, the video is paused (so the audio isn't heard when the player is hidden), the div sized back to 0x0, and the overlay hidden.

function hidePlayer() {
  modVP.pause(true); // Pause playback
  document.getElementById('overlay').style.display='none';
  document.getElementById('lightbox').className = 'hide';
}

You could extend this by having multiple thumbnails each loading a different video into a common lightbox player. See this example.