Video lightbox from text link

Support
#1

Hi guys,
I’m trying to have a video lightbox of a vimeo video with a simple “Click here to see our video”. I tried suggestions I found in other similar posts, but haven’t achieved what I want. Thank you.

#2

Hi there,

Thanks for writing in.

Maybe there is a javascript error that prevents it, it should be just the same as implementing lightbox for images and youtube. Would you mind providing a sample URL that has this issue?

Thanks!

#3

Hi Rad,
Here’s the link to the website. Maybe I’m not using the right shortcode.

#4

Hi There,

You need to do as follows:

<a href="http://vime.com/videoid"  class="lightbox-go"> text </a>

Than add the following code to a Raw Code Element:

[lightbox selector=".lightbox-go"]

Let us know how it goes.

Thanks

#5

Hi guys,
I tried the code provided but it is not working. here it is in a text page on the website. Also, is there a way for the background to be opaque black instead of white? thanks

https://www.surfingturtlelodge.com/videotest/

#6

Hi,

You need to use the embed src url

Please change your code to this.

<a href="https://player.vimeo.com/video/245535173" class="lightbox-go" style="outline: none;" data-options="thumbnail: '', width: 1080, height: 608">Click here to see our video</a>

[lightbox selector=".lightbox-go"]

For more information kindly refer to the link below.

Hope that helps.

#7

Thanks, yeah that worked. That being said, the lightbox has a white background. How can I change that to a black background, similar to an envira lightbox.

Thanks,

Renzo.

#8

Hi Renzo,

Please add the following CSS to Theme Options CSS

.ilightbox-overlay.light {

    background: black;
}
.ilightbox-toolbar.light {

    background: none;
    border: none;
}

Hope it helps!

#9

Thanks a lot for your help. One final question. How do I change the border around the video from white to black? or remove it

#10

Hi,

To remove the border please add this CSS

.ilightbox-holder.light {
    border: none;
    background: none;
}

Otherwise, to make it black:

 .ilightbox-holder.light {
        border: 2px solid #000;
        background: #000;
    }

Hope that helps.

#11

Hi Bappi,
Yes, that did the trick. The client noticed that there is a white shape that appears above the video before the video loads. Is there a way to remove this? Here’s an image of what I mean.

#12

Hi There,

Sorry, for the confusion. That white shape thing is actually the indication that your lightbox is loading. You can hide it with the custom CSS below, but we won’t recommend it.

.ilightbox-loader {
	display: none !important;
}

Cheers!

#13

Hi Friech,
Thanks for your help. I’m not too familiar with lightbox shortcodes and you have all been very helpful with it, as always.

#14

You’re welcome ! :slight_smile:

#15

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