Video Lightbox help

Support
#1

Hi, I’d like the watch button in the hero banner on the homepage of this site http://chipsanddinks.co.uk.gridhosted.co.uk/ to open up my YouTube video in a light box.

Do I need to insert the button as a shortcode in the text element for it to work? I followed your lightbox guide but it didn;t work.

I’ve left it as a link to the the youtube page for now.

Any advice on the best way to show / include video in the header would be appreciated.

#2

Hi There,

You need to ad a class to your button shortcode, for example :slight_smile:

[button class="myvideo" type="real" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]

Then add on Cornerstone a RAW Code Element and add the lightbox selector.

[lightbox selector=".myvideo"]

Hope it helps!

#3

What element in corner stone do I add the button class?

And do you mean Raw Content element?

#4

Hello @noznewman,

Please add the button code in Cornerstone Raw content element.

Thanks.

#5

Hi,

I’ve done that and it doesn’t open? see first button on this page
http://chipsanddinks.co.uk.gridhosted.co.uk/

#6

Hi, Please try linking it : https://www.youtube.com/watch?v=h528PIHPcUg&autoplay=1

If that does not work, please provide your admin credentials in a secure note so we can take a closer look.

Thank you

#7

Didn’t work, I’ve saved login details in a secure note

#8

Hi There,

Please contact your hosting provider and ask them to allow iframes from the different origin.

Let us know how it goes.

Thanks!

#9

My hosting provider is saying they don’t have any such restriction set?

#10

Hello There,

We would love to check how you have set up your button and lightbox. Regretfully we can’t because when you view http://chipsanddinks.co.uk.gridhosted.co.uk/, you will redirected to http://www.chipsanddinks.co.uk/. Could you please check this staging area so that we can log in and create an example to resolve this issue?

Thank you in advance.

#11

Hi,

I needed to put the site live - so please login to the live site and test on this page http://www.chipsanddinks.co.uk/home-rev/ Test page)

Please use the same login in previous secure note - but use http://www.chipsanddinks.co.uk/wp-admin/

Thanks
Paul

#12

Hi Paul,

To link a lightbox to a button, first thing is to add a CLASS to the button that will be the selector on the lightbox.

Lets say lbx as sample Button CLASS

Then a lightbox shortcode with the selector (.lbx) to target the button. You can paste it on a RAW Content Element. You can place it just below the button so you can easily find it if you need to edit this shortcode later on your development.

[x_lightbox selector=".lbx"]

Now to link the button to a YouTube video, go to your YouTube video’s page and get its Embed code (not the page URL). Then paste that to the button’s HREF field.

See the bottom or your Test page for your reference.

Hope it helps,
Cheers!

#13

Brilliant - thanks for your help !!

#14

You are welcome!