Help with video lightbox

Support
#3

Awesome work! that kinda worked I think…I have it like this:

Download Watch Demo[lightbox selector="a.myButton"]

Is this correct?

The only thing is, there is a weird frame appearing to the left of the popup:

(just under the green cross)

#4

Hi,

I checked and can no longer see the the extra frame.

I can see you have added unique class to your videos and separate lightbox which is the correct way in fixing this.

Glad to know you were able to figure it out.

Have a nice day! :slight_smile:

#5

Its still there, I cleared the style cache and kinsta cache, can you check again, its on the right too, and its clickable, if I click on the right, it takes me to the page, but in a lightbox, very strange…

#6

Hey There,

Did you remove the lightbox shortcode? It’s not showing the lightbox anymore.

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

#7

I havnt no, the code I have is:

Download Watch Demo[lightbox selector="a.myButton"]

I will give you login in the secure note.

Also, while we are playing with that code, it looks good, but at this size, they stack, but really closely, how can I add a gap?:

Also, strangely, the download button is acting as a lightbox too, and opening the link in a lightbox, I dont want that.

#8

Hi There,

I couldn’t see the lightbox shortcode in your text element:

Where did you place them?

I’ve updated your button HTML code to this:

<p style="margin-top: 50px; text-align: center;"><strong><a class="myButton" href="#">Contact Us</a></strong>      <strong><a class="myButton watch-demo" href="https://player.vimeo.com/video/282544567?autoplay=1&amp;title=0&amp;byline=0&amp;portrait=0">Watch Demo</a></strong></p>
[lightbox selector="a.watch-demo"]

The lightbox is working fine.

Could you please double check?

Thanks.

#9

Thats working perfectly now, thanks!

Any chance of adding a space when they stack?

#10

Hi There,

Please also add this custom CSS:

@media (max-width: 767px){
     .myButton {
          margin-bottom: 15px;
     }
}

Hope it helps :slight_smile:

#11

Howdy, sorry. that didnt really do anything,

#12

Hi again,

I checked the enterprise edition page and the above code is working fine (see screenshot)

Try clearing out your browser’s cache and check the page again.

Let us know how this goes!

#13

Hmm, sorry to be a pain, but I cleared the caches, opened in incog, but nope:

#14

Hi again,

Please replace the previous code with the following code:

.myButton {
    margin-bottom: 15px;
}

Make sure to clear all caches including the browser’s cache after adding the code.

Let us know how this goes!

#15

Yeah, I was going to add that, but then the button that uses the same css on the homepage, adds the margin, and I dont want it there…

#16

Maybe a solution would be to make it stack like the mobile view, so the image underneath, so instead of the views liek desktop/ipad/mobile make it desktop/ipad/mobile ?

#17

Hi @logoglo

I’m sure that this CSS code should work instead of the previous one:

@media (max-width: 1110px){
     body:not(.home) .myButton {
          margin-bottom: 15px;
     }
}

Thanks.

#18

Perfect! that worked a treat…I have another question regarding the lightbox, I switched stacked, and now its showing a light background, is there a way to use the same stack, but change the lightbox to a dark version like before?

Thanks.

#19

Hi again,

You can add the following code as well:

.ilightbox-holder.light, .ilightbox-overlay.light, .ilightbox-toolbar.light {
    background: #000 !important;
    border: 0 !important;
}

Hope this helps!

#20

Perfect! thanks.

#21

On behalf of my colleague, you’re welcome. Cheers!:slight_smile:

#22

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.