Streaming live at 10am (PST)

Dynamic Video Lightbox!

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: http://sandbox-903b9c.webflow.io/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:

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: http://sandbox-903b9c.webflow.io/dynamic-video-lightbox

Share Link: https://preview.webflow.com/preview/sandbox-903b9c?preview=2a77d4d5446ddad097abb9bf8603288b (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.


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

6 Likes

I was trying to figure this out for hours today. Thanks @samliew. I guess now we have 2 options for people.

Can you link the videos using this method by any chance so they show up at the bottom? And how do you style everything for your list? Do you have a read only you can send me? Thanks!

Next time you should bounce ideas off me first.

What do you mean?

I didn’t style them at all. It’s just dynamic list column selection + a single lightbox inside.

I updated share link on my post above.


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

1 Like

You know how there’s an option to link light boxes in the lightbox settings so that the thumbnails for the other ones show up in the bottom of the lightbox below? I was curious if there might be a way to do that.

So how do you style the entire list so it looks good? And how do you add the title below and tweak everything so it looks right?

EDIT: I figured out how to style it. Just add the class of your pre-styled elements to the lightbox outer div and the inner image if desired.

Oh that would be just another setting, can be done easily. Did you see my flickrsearch project above? I linked dynamic content together in the same lightbox.

5 posts were split to a new topic: Dynamic Video Lightbox Help (1)

Does this code work even if the embedded video is not from Youtube or Vimeo?

A post was split to a new topic: Lightbox to display content instead of images/video?

Hello! I got everything working fine. However, I couldn’t figure out how to stylize the thumbnails. Would it be possible to show on hover something like this?

I think I managed to do it!

(it still needs some stylization)

I just made an interaction with the HTML embed to get the opacity to 0% on hover revealing what’s behind it. Initial appearance is 100%, hover is 0%, hover out is 100%.

Behind I put the layout I wanted using the same size as the thumbnail.

However, the HTML embed will still be clickable even though is not visible since I put a higher z-index to it, so whenever they click on the layout, it’s going to open the video lightbox and such!

This is all using CMS :smiley:

I just give numbers to my portfolio items and then I can set a filter to each of the dynamic lists to “number equals x” and limit to 1 item.

The downside to this is that I cant really put any interactions to the layout behind the thumbnail. Would love to make the play button pulse.
The only way to make it interact on hover is making the HTML embed completely disappear, but then you wouldnt be able to open the video lightbox.

Please, let me know If there’s a most effective way to do this, I’d love to know!

and thank you for all your amazing help so far :slight_smile:

1 Like

@samliew Do you know why I’d be seeing double the videos in the lightbox group when the lightbox is full screen? The first 7 videos don’t work, but the last 7 do. Your help is much appreciated!

Page is /resources-and-support

Read only: https://preview.webflow.com/preview/naturalplaygrounds?preview=417dd3835fc935b54715ed5ceffb562e

Link: http://naturalplaygrounds.webflow.io/resources-and-support#videos

Hi, samliew! Does it possible to switch to smaller images for mobile versions in the same lightbox? Using, say, some media queries?

Hey all. This question is particularly for @samliew, @sabanna, and @Waldo.

I’ve used the method in this forum to successfully close the video on the main page of a website. But, I have another page with a collection of lightboxes. The code seems to break down because when you click on a thumbnail, instead of popping up the correct video, it pops up the video of the first thumbnail, no matter which thumbnail you click. I suspect it’s because it’s finding the first time the class is found in the html. Is there way to have this code reference the actual video that’s clicked?

Here’s my webflow preview URL

https://preview.webflow.com/preview/makebeautiful?preview=0b9aa31b242c1e85847b67d107dcd50d

Thanks in advance for your help!

Hey @samliew, @sabanna, and @Waldo. Just checking in to see if one of you could take a look at my previous post?

Thanks!
Jose

This is terrific! Thanks for posting such a detailed reply.

Hi! @DFink @jocando

Thank you very much for your post. I’m trying to make it work and actually im close to it but still missing something…when i click any of my videos the modal will show the first video always…any thougts?.

thank you!

Hi Sam!

Thank you for your post. Im trying to make it work but it seems the video URL doesn´t show correctly. You tube says that there was an error … any thoughts?

thank you

Hey @Dave01

I had a friend write some custom javascript for me that did the trick. The code is below. He mentioned the following:

The main thing to be mindful of when targeting CSS classes with Javascript is that there may (or in this case will) be several instances of that class on the page, and for this particular task, finding a way to target specific elements is essential.

In this case, I chose to use the event object (see: “…click(function(e)…”) to help pinpoint the exact modal containing the video being played. From there, we can find/target the specific “.work-collection-item”, which in turn allows us to find the specific iframe.

<script>
$(document).ready(function() {
    // listen to when background or "x" has been clicked
    $('.modalbackground, .modalbackground .white-close-button').click(function(e) {
        var t = $(e.target); // close target
        var c = t.closest('.work-collection-item'); // container 
        var v = c.find('.w-video iframe').attr('src'); // video source
        
        // remove src
        c.find('.w-video iframe').attr('src', '');
        
        // add src back
        c.find('.w-video iframe').attr('src', v);
    });
});
</script>
1 Like

Yeeha! thank you @jocando! i will try :smiley:

Really appreciate you quick response.

This is great thanks! Question… how can I get autoplay to work?
When I add “?autoplay=1” to the youtube link it cause the video now to work. I tried adding “allow=“autoplay; encrypted-media”” but that didn’t work either. Not sure what to do. Whenever I added ?autoplay=1 to a video in the lightbox video element (without CMS, just regular) it works no problem. Curious if I am missing anything.