This page provides a simple demo of loading a self-hosted VideoPress video in a lightbox. The video is uploaded to the media library and embedded with the core VideoPress block.

Open VideoPress Video

(added via VideoPress block and shortcode)

Setting this up is different than, say, a Youtube video, because he VideoPress block embeds the video in the page so there is no link for Firelight to use. To get around that, this page uses Firelight’s ability to open any ‘inline content’ in a lightbox.

  1. Preparation:
    • Upload your video. Upload your video to your media library so that is ready and available. Copy the video url.
    • Enable the lightbox for Inline Content. Under Lightbox settings, be sure to enable the lightbox for Inline Content.
  2. Set up the lightbox content:
    • Add a Group block. Add a Group block to contain content that will show in the lightbox. On the right sidebar, go to block settings and to the advanced tab, and give the Group block a unique ID. Here, I used ‘uniqueID‘.
    • Hide the content. Also give the Group block a css class of ‘fancybox-hidden‘, which will hide the Group block and its content until opened in the lightbox.
    • Add the VideoPress video. You’ll want to add this within the Group block. It can be added in a number of ways. I’ll share two options, but I think there are others.
      • VideoPress Block. You can add a VideoPress block and add the video url from the media library to the Embed url field. This will convert itself to a shortcode.
      • Iframe: You can insert hosted VideoPress videos using an iframe snippet from VideoPress. in this case, just add an html block and add your iframe snippet there.
  3. Add the lightbox link:
    • Link to your Group block uniqueID. Outside of the Group block, add a paragraph block with the text “Open VideoPress Video”. Select the text and make it into a link. Set the link to your unique ID for your group block. So in our example, the link is set to #uniqueID.
    • Add fancybox-inline class. Also in the paragraph block, go to advanced block settings add add the ‘fancybox-inline’ class. This is what tells Firelight it should open this specific link in the lightbox.
  4. Extra bit of CSS :(. This shouldn’t be needed and we’ll look at at how to resolve it. There’s a bug where the VideoPress container, when opened in a lightbox, initially opens with the wrong height. It corrects itself if the screen is resized, so obviously the container height is determine by JS, and that JS is not firing correctly upon initial open. For now, I’ve fixed this by adding this custom css: .wp-video-shortcode { height: 337.333px !important; }.