Docs

[mattheltzel]

Hi all,

I’ve read through the lighbox video documentation, but I need help with one thing.

I want to have a button that links to a lightbox, but I want it to be the lightbox from my video host, SproutVideo. I just like theirs a better.

Here’s the lightbox code they give me:

<a href='//videos.sproutvideo.com/embed/709bdeb51f1de7c5f8/e096860a42cc712b?type=hd&playerColor=2f3437&playerTheme=light&autoPlay=true'><img src='https://cdn-thumbnails.sproutvideo.com/709bdeb51f1de7c5f8/e096860a42cc712b/1/640/360?btn=true&btn_bg=FFFFFF&btn_fg=2f3437' /></a><script charset='ISO-8859-' src='https://c.sproutvideo.com/lightbox/v1.0.0.js'></script>

Then, here’s the lightbox code I’m trying to use to get that to work, but when the button is clicked, there is no video, just a blank lightbox.

[button href=”https://videos.sproutvideo.com/embed/709bdeb51f1de7c5f8/e096860a42cc712b?type=hd&playerColor=2f3437&playerTheme=light&autoPlay=true&#8221; class=”sproutvideo-lightbox” data-width=”640″ data-height=”360″][icon type=”play-circle”]sproutvid lightbox<script charset=’ISO-8859-‘ src=’https://c.sproutvideo.com/lightbox/v1.0.0.js’></script>%5B/button%5D

Site: https://renaissancepassport.com

Also as an aside, I’m using zopim live chat, and I’d like to know if there’s a way to hide that script from my that page as well. I’d like it on all other pages, just not the landing page.

[Joao]

Hi There,

Please paste the code below on your RAW Element on Cornerstone:

<a href='//videos.sproutvideo.com/embed/709bdeb51f1de7c5f8/e096860a42cc712b?type=hd&playerColor=2f3437&playerTheme=light&autoPlay=true'><button class="x-btn" type="button"><i class="x-icon x-icon-play" data-x-icon="" aria-hidden="true"></i>Click Me!</button></a><script charset='ISO-8859-' src='https://c.sproutvideo.com/lightbox/v1.0.0.js'></script>

And the code for the X Lightbox would be this code below in case you need it.

[button class="btn-lightbox" href="https://videos.sproutvideo.com/embed/709bdeb51f1de7c5f8/e096860a42cc712b?type=hd&playerColor=2f3437&playerTheme=light&autoPlay=true" title="A Video"  lightbox_video="true"][icon type="play-circle"]Watch Our Demo[lightbox selector=".btn-lightbox"][/button]

Hope that helps,

Joao

[mattheltzel]

Hi Joao,

That didn’t work. It’s linking to a new tab with the video in it. Not a lightbox? Is the button messing that up?

Matt

[mattheltzel]

Hey I actually got that fixed. Was missing a portion of the code.

Now, however, when the lightbox comes open there is a scrollbar. Not ideal :S any idea how to get rid of it?

[Joao]

Hi There,

Please provide the code you are using.

I have tested the X Lightbox and it is working perfectly fine on my end.

Thanks,

Joao

[mattheltzel]

Hi Joao,

OK so where I’m at with this is I’m at.

I tried to use the SproutVideo code that you gave me, but that lightbox showed up with a scrollbar in the lightbox. I don’t know why. Here’s that code… Ideally, I’d like to use the SproutVideo Lightbox because I like how it has an X to close out right next to the video.

<a href='//videos.sproutvideo.com/embed/709bdeb51f1de7c5f8/e096860a42cc712b?type=hd&playerColor=2f3437&playerTheme=light&autoPlay=true'><button class="x-btn" type="button"><i class="x-icon x-icon-play" data-x-icon="" aria-hidden="true"></i>Click Me!</button></a><script charset='ISO-8859-' src='https://c.sproutvideo.com/lightbox/v1.0.0.js'></script>

I also tried to use the X Lightbox you gave me, and in Firefox it didn’t open anything, and in Microsoft Edge it showed the video but also had another lightbox (only like 1″ of it is showing in the far right of the browser). It’s like it was a slider gallery or something. Here’s the code:

[button class="btn-lightbox" href="https://videos.sproutvideo.com/embed/709bdeb51f1de7c5f8/e096860a42cc712b?type=hd&playerColor=2f3437&playerTheme=light&autoPlay=true" title="A Video" lightbox_video="true"][icon type="play-circle"]Watch Our Demo[lightbox selector=".btn-lightbox"][/button]

Here’s what it looked like in Microsoft Edge (Explorer):
http://s33.postimg.org/6axav6lf3/Capture.jpg

Ideally, I’d like to use the SproutVideo code, but if I am forced to use the X code then I’ll do that. If you go to my site right now, I have both buttons on there.

Thanks,
Matt

[Rad]

Hi Matt,

There could be the problem with SproutVideo embed code, but I can’t confirm and trace that.

About the lightbox, the issue is declaring lightbox and proper usage of the selector. You have two rows which are specific to devices, each row has button and lightbox, hence :

2 instance of this button

[button class="btn-lightbox"]

2 instance lightbox

[lightbox selector=".btn-lightbox"]

This means, each instance of lightbox will open each button’s video. 2 x 2 = 4 videos. If you wish to open one video at a time, then use 1 selector for one button and lightbox at a time. Let’s narrow it,

This should go for device that targets smaller device

[button class="btn-lightbox-mobile" href="https://videos.sproutvideo.com/embed/709bdeb51f1de7c5f8/e096860a42cc712b?type=hd&playerColor=2f3437&playerTheme=light&autoPlay=true" title="A Video" lightbox_video="true"][icon type="play-circle"]Watch Our Demo[lightbox selector=".btn-lightbox-mobile"][/button]

then this for desktop

[button class="btn-lightbox-desktop" href="https://videos.sproutvideo.com/embed/709bdeb51f1de7c5f8/e096860a42cc712b?type=hd&playerColor=2f3437&playerTheme=light&autoPlay=true" title="A Video" lightbox_video="true"][icon type="play-circle"]Watch Our Demo[lightbox selector=".btn-lightbox-desktop"][/button]

We use btn-lightbox-mobile and btn-lightbox-desktop for class and selectors, that is to isolate lightboxes from each other. And you can always use your own class name/selector. Just make sure to match them (button and lightbox).

Hope this helps.

[mattheltzel]

Thanks so much. Helps a lot.

Please whatever you guys do, don’t drop your incredible customer service on this forum. Amazing.

[Prasant Rai]

Your satisfaction is a great compliment for us. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts