How to Caption a Lightbox with Video

This is a Webflow lightbox with a video link.
Notice that Webflow doesn't support captions for video/media embed in a lightbox.

This is the same lightbox as above, but with caption displayed below.


We are going to be using JavaScript to insert a caption based on the lightbox's custom attribute "data-caption"

Step 1:

Add a custom attribute to the lightbox settings tab. For name field type "data-caption". In the value field, provide your caption.

Step 2:

Go to the current page settings on the left toolbar. Under the Custom Code section in "Before </body> tag", paste this JavaScript code. (You can also paste this code in an embed component)

// On page ready
var Webflow = Webflow || [];
Webflow.push(function() {

  // When a lightbox is clicked
  $('.w-lightbox').click(function() {

    // Get the data-caption attribute from the lightbox
    caption = $(this).data('caption');

    // If caption is missing, do nothing
    if(typeof caption == 'undefined' || caption == '') return;

    // Remove the existing caption (if any)

    // Append the caption into the lightbox after a split second
    setTimeout(function() {
      $('.w-lightbox-figure').append('<figcaption class="w-lightbox-caption">'+caption+'</figcaption>');
    }, 500);

  }); // End lightbox clicked

}); // End ready function

Step 3:

We will now bring the caption below the video, by adding an extra style. Paste this after the code above.

.w-lightbox-embed + figcaption.w-lightbox-caption {
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);

Step 4:

Publish your site and preview it in the sub-domain (this doesn't work in the editor's Toggle Preview).