Streaming live at 10am (PST)

Dynamic Video Lightbox!


#1

Hey Everyone!

Thanks to @sabanna and @Waldo, we figured out a way to get a fully working dynamic lightbox for youtube and vimeo videos that stops the video when you close the modal. The stopping of the video was the biggest issue here and the reason for the custom code. The modal itself is completely done with interactions.

First, make a collection that contains your video url and thumbnail image.

Then create a new dynamic list and inside the first item, add a div block videolink with an image inside containing the thumbnail and set it to pull from the collection.
Tip:change the css cursor type on the div to the hand icon so people know to click it.

To create the modal:
Then, still inside the dynamic item create a modalcontainer div and set it to fixed: full with a higher index than anything on your page.

I also set the padding on the left and right to 25% to center the video instead of having it fullscreen.

Then inside that we will create the modalbackground, create another div set to absolute: full and set the background color to something like 75% black.

Inside this add a close button in the corner using absolute positioning, this doesn't have to be a link or anything, just an image since the entire background will close the modal. You can also set the cursor to the hand as well and add any hover effects you'd like, I did 75% opacity to 100% on hover.

Then, still inside the modal container, add a video block modalvideo and set it to pull from the video URL. You then must set this to have a z index higher than the modalcontainer
I also set this to center itself vertically using the old school 50% top and transform 50% trick.

Your structure should look like this:

Add the interactions:
To the videolink item, add this interaction targeting the modal container. First Click: step one: display:block, opacity 0%. Second step, opacity 100%, 200ms transition

IMPORTANT: Make sure to check the box "limit to sibling elements"

Next we are going to close the modal by clicking anywhere in the background including where the close button is.
On the modalbackground element, apply this interaction: Display:none, opacity 0%, 200ms transition

Add the codez:
Thanks to @sabanna and @Waldo for this one. This makes sure the video stops playing when you close the modal, very important!!

<script>
$(document).ready(function() {
// config
var openvideobutton = '.videolink';
var closevideobutton = '.modalbackground';

// do not touch!
var vsrc = $('.w-video').find('iframe').attr('src');
//functions
$(openvideobutton).click(function() {
	$('.w-video').find('iframe').attr('src', vsrc);
});
$(closevideobutton).click(function() {
	$('.w-video').find('iframe').attr('src', '');
});
});
</script>
<script src="https://s3.amazonaws.com/youtube-vimeo-videoz/dynamic-videoz.js"></script>

So that's it! Hope that helps you guys! I know it helped me immensely on a client project!!

-DFink (Dave)


Embeded Vimeo videos in Dynamic item?
#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: 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


Dynamic Video Lightbox Help (1)
How to achieve this tricky scroll effect
#3

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!


#4

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


#5

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.


#6

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.


#7

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


#11

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


#12

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


#13

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?


#14

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:


#15

@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


#16

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


#17

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!


#18

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

Thanks!
Jose


#19

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


#20

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!


#21

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


#22

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>

#23

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

Really appreciate you quick response.