Dynamic Video Lightbox!

Community resources Webflow Tips
2

If you are going to be using custom code anyway, this can also be done using the Webflow native lightbox (so you don’t have to make any custom modal window and interactions). Also, you don’t have to load an external API script to control the video, because Webflow lightbox already does this for you.

DEMO: Dynamic Video Lightbox

Step 1:

Insert Embed Code in the dynamic list. Paste this

<a class="w-inline-block w-lightbox" href="#">
  <img src="[COLLECTION-IMAGE]">
  <script class="w-json" type="application/json" 
          data-src="[COLLECTION-VIDEO-URL]" 
          data-img="[COLLECTION-IMAGE]">{ "items": [{
    "type": "video",
    "url": "[COLLECTION-VIDEO-URL]",
    "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https://www.youtube.com/embed/{YOUTUBE}?feature=oembed&url={SRC}&image={IMG}&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=youtube\" width=\"940\" height=\"528\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>",
    "thumbnailUrl": "[COLLECTION-IMAGE]",
    "width": 940,
    "height": 528
  }] }</script>
</a>

Step 2:

In the code above that you pasted into the Embed Code Editor,

  • Replace [COLLECTION-IMAGE] (x3) with image from collection
  • Replace [COLLECTION-VIDEO-URL] (x2) with video url from collection (the collection field that user insert the video link, type must be single line text, and not video type)

You should have something that looks like this:

802×355 29.9 KB

Step 3:

Paste this in Page Settings > Custom Code > Footer Code

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  var json = $('.w-json[data-src][data-img]');
  json.each(function() {
    var youtube = $(this).attr('data-src').match(/[^=]+$/);
    var src = encodeURIComponent($(this).attr('data-src'));
    var img = encodeURIComponent($(this).attr('data-img'));
    if(typeof youtube === 'undefined') return; // not valid youtube video
    $(this).html($(this).html().replace('{YOUTUBE}', youtube[0]).replace('{SRC}', src).replace('{IMG}', img));
  });
  $('.w-lightbox').webflowLightBox();
});
</script>

DEMO: Dynamic Video Lightbox

Share Link: Webflow - Sandbox (Page is “Dynamic Video Lightbox”)

Note: Currently this works for YouTube videos with this specific format
https://www.youtube.com/watch?v=R9zvbKdrIqA, but Step 3 could be modified to accept vimeo and other video links

Another dynamic native Webflow lightbox, data from external API, paginated.

https://webflow.com/website/FlickrSearch

Also, feel free to contact me for further code help and/or customization of third-party plugins

7 Likes