Video Light Box Button

Support
#1

I’m trying to use pro to create a button that will play a video in a light box.

I was using this shortcode, but the button text doesn’t match with the other buttons.

[button class=“video-button” href=“https://www.youtube.com/embed/4QYuiag650k?rel=0&autoplay=1” title=“Murder in the Woods - Official Trailer” lightbox_video=“true”][icon type=“play”]PLAY VIDEO[/button]
[lightbox selector=".video-button"]

Is there a way to do this within the pro button element?

#2

Hi there,

Thank you for reaching out to us. Yes that can be done with the Button element, just give your button a class video-button then in URL field add your video link https://www.youtube.com/embed/4QYuiag650k?rel=0&autoplay=1 then you need a Text element as well to add the following shortcode [lightbox selector=".video-button"]

Hope this helps!

#3

Thanks, that works, but the video takes up the whole page. I have another video in a lightbox of the page, and it appears properly.

Any idea what happened?

#4

Hi There,

You did not add the CLASS video-button to the button and did not add the lightbox shortcode on the page.

Please inspect your button, then under the Customize tab add a CLASS video-button to it.



Then at the bottom of your page, add a Content Area element and paste the following lightbox shortcode in it.

[lightbox selector=".video-button"]



Hope it helps,
Cheers!

#5

I have done that and it doesn’t work. the one video works fine, but the other takes up the whole screen.

#6

Hello There,

Your button does not have the video-lightbox-1 or video-lightbox-2 as a custom class. You might have forgotten to add the class to the button. I went ahead and edited your header and the homepage content as well.

And to make sure that the video lightbox will not be fullwidth, I added this custom css to set a maximum width for the lightbox container.

/* for the video lightbox */
.ilightbox-holder div.ilightbox-container {
    max-width: 900px;
    max-height: 600px;
}

.ilightbox-holder {
    left: 50% !important;
    margin-left: -450px;
}

Please check your site now.

#7

That works but breaks when on a mobile device.

#8

Hey There,

Well in that case, please have the code updated and use this instead:

@media(min-width: 980px) {
  /* for the video lightbox */
  .ilightbox-holder div.ilightbox-container {
    max-width: 900px;
    max-height: 600px;
  }

  .ilightbox-holder {
    left: 50% !important;
    margin-left: -450px;
  }
}

Please let us know if this works out for you.

#9

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