Insert video lightbox in button

Support
#1

Hello, my site url is http://pacify2dev.wpengine.com/#Meet-Pacify.mp4

I want to insert a button onto my homepage that opens a lightbox playing a video. I have tried a number of different threads on this issue but nothing has worked so far. Currently, I’ve tried the following code in a RAW Code Element, which just opens an empty lightbox:

[button class=“btn-lightbox” href="

Meet Pacify from Pacify Health on Vimeo.

" title="A Video" lightbox_video="true"][icon type="play-circle"]See Pacify in Action[lightbox selector=".btn-lightbox"][/button]

There are two buttons there, one is an element that currently links to nothing, and one is the raw code. Please help!

Thanks!

#2

Hey there,

Thanks for writing around! Please use this sample code for a video lightbox using a button:

[button class="videoLightbox" type="real" shape="square" size="mini" href="//player.vimeo.com/video/84751465" title="Example"]Square Button[/button]

[lightbox selector=".videoLightbox" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal"]

Change the video link and other attributes as per your need.

Cheers!

#3

Thank you for getting back to me. I have tried that code and I continue to get a blank white box when I click the button.

I’ve tried inserting both the link (“https://vimeo.com/pacifyapp/meetpacify”)

and the embed code ("

Meet Pacify from Pacify Health on Vimeo.

")

and neither seems to work.

#4

Hi again,

Make sure to add the above code in Classic Raw Content element and it should work as expected. I tested in my local setup and it works fine.

Let us know how this goes!

#5

Thank you, that worked! I was pasting in the wrong embed code.

Last question, how do I change the background color of the button, text margins, etc.?

#6

Nevermind, I figured that out! Thank you for your help :slight_smile:

#7

Glad all is working now.

Cheers!

#8

Sorry, two more questions:

  1. How do I change the scale of the lightbox when it pops up? I’d like it to be smaller.

  2. Is there a way to make the video play automatically upon clicking the button, rather than having to press play?

Thanks again!

#9

Hi there,

Would you mind providing the login of your page (authentication popup)? I can’t access your page as of this moment.

Thanks!

#10

I’ve added it as a secure note to my previous comment. Thank you!

#11

Hi there,

To autoplay the video, please try this instead:

[button class="videoLightbox" type="real" shape="square" size="mini" href="//player.vimeo.com/video/84751465?autoplay=1" title="Example"]Square Button[/button]

Then also add this code in the custom CSS:

.ilightbox-holder div.ilightbox-container {
    width: 800px !important;
    height: 600px !important;
}
#12

Thank you! Also, how do I align the lightbox centered? I’ve tried text-align: center, but that hasn’t worked.

Thanks!

#13

Hi There,

No, you cant center that with text-align: center because that is positioned as absolute, please add this to Theme Options > CSS instead.

.ilightbox-holder.light {
	left: calc(50vw - 400px) !important;
	top: calc(50vh - 300px) !important;
}

Hope it helps,
Cheers!

#14

Perfect, thank you so much!!!

#15

We are delighted to assist you with this.

Cheers!

#16

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