Docs

[NinjaTeX]

Hey awesome Themeco support peeps!

Ok I know there are a lot of posts on this but I still can not get it to work.

I have perhaps a slightly different problem. I’m not using shortcode, just php and html.

ok so on this page on my test site which is a custom post type I would like the button near the bottom that says WATCH VIDEO to open the video in a lightbox.

This button is not built with shortcode nor cornerstone. I have tried adding classes to the button like in this code:

<a href="https://www.youtube.com/watch?v=awrvjlGS_t4" class="videoLightbox; x-btn" target="_blank" x_lightbox="" selector=".video-player" lightbox_video="true">									<i aria-hidden="true" class="x-icon"><img src="http://pods.x.dev.tstest.ca/wp-content/uploads/2016/03/hero-page-icon-video.png" align="" width="25" height="25"></i>
								WATCH VIDEO			</a>

I’ve also tried the btn-lightbox class and it is still not working.
Is there some other html code to add?
Is there a php function I can call to have the link open in lightbox?

Could you please help me out on this one? Really need to get this to work soon.

Thanks so much!
Jesse

[Friech]

Hi Jesse,

Hope you’re doing fine today, please update your code to this:

<a href="https://www.youtube.com/embed/awrvjlGS_t4?rel=0" class="lbx vid"><image src="http://pods.x.dev.tstest.ca/wp-content/uploads/2016/03/hero-page-icon-video.png" />WATCH VIDEO</a>
[lightbox selector=".lbx"]

Hope it helps, Cheers!

[NinjaTeX]

Ok Thanks,

We’ve got the button opening the video in lightbox.

Now how can we change the size of the lightbox from fullscreen down to be centered on screen and say max 843x480px?

I’ve looked at other posts on the subject but can’t figure out how to adjust the size of lightbox and have stay in center of screen.

Thanks for any more help with this one!

[NinjaTeX]

One more question.

is there an argument for width and height which we can pass?

[Nabeel A]

Hi again,

Regretfully there are no parameters for width and height but this can be done with custom CSS, please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.ilightbox-holder.light {
    width: 80% !important;
    left: 10% !important;
}
.ilightbox-holder div.ilightbox-container {
    width: 100% !important;
}

Let us know how this goes!

[NinjaTeX]

This reply has been marked as private.

[Paul R]

Hi,

You can try this code instead.

<a class="x-img lbx x-img-link" href="https://www.youtube.com/embed/awrvjlGS_t4?rel=0" data-options="thumbnail: 'http://pods.x.dev.tstest.ca/wp-content/uploads/2016/03/hero-page-icon-video.png', width: 1080, height: 608"><img src="http://pods.x.dev.tstest.ca/wp-content/uploads/2016/03/hero-page-icon-video.png"> WATCH VIDEO</a>

[lightbox selector=".lbx"]

You may change the width and height to achieve your desired size for your video.

Hope that helps.

[Author]

Posts