[markwestParticipant]

Hi,

I hope you can help me please?

I am trying to make an entire section link to a Youtube video, displayed in a lightbox. The section has an animated GIF background and some text over the top describing the video and a large play icon.

I have found help articles that describe adding some jquery to make a section a link. And I’ve also found details of how to create a lightbox shortcode to display video – but not how to use them together – or even if this is the best way to achieve this result?

I will add site URL and access details in the following private message.

Thanks for your help.

Mark

[markwestParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add a video in an empty page, use No header-No footer template for this page.

Insert following code under cornerstone settings tab/custom js :

jQuery(".home #x-section-1").wrap("<a href='#'></a>");

Instead of # add page’s URL.

Hope it helps.

[markwestParticipant]

Hi Christopher,

I’m not quite sure why I need to add the video to a new blank page?

I have added the following jquery the homepage –

jQuery(".home #x-section-1").wrap("<a href='https://www.youtube.com/embed/joPjqEGJGqU?list=PLLtjKBfcXe9jQnydbCYKRwtVcFjMIwPRt'></a>");

But this just redirects to the Youtube video page. I’d like the Youtube video to open in an X lightbox – so that the user can simply close the lightbox and be back on the site.

Is that possible please?

Thanks

Mark

[markwestParticipant]

`jQuery(“.home #x-section-1”).wrap(“<a href=’https://www.youtube.com/embed/joPjqEGJGqU?list=PLLtjKBfcXe9jQnydbCYKRwtVcFjMIwPRt’></a>”);’

[ChristopherModerator]

Hi there,

Did you add light box shortcode to your page?

Thanks.

[markwestParticipant]

Hi Christopher,

Yes, I have it within the text element in that section – [lightbox]

But I don’t see anything with the jquery you sent me that would
trigger the lightbox?

Thanks

Mark

[JoaoModerator]

Hi Mark,

I could not check your site using http://2016.bristolvineyard.com/wp-admin/ I am getting too many redirects.

Lets try like this.

Add a lightbox selector to your page to a raw code element.

[lightbox selector=”.lightvideo”]

Add the class lightvideo to the section that you want to link to your video lightbox.

Add the code provided by christian to make the section linkable, if it is the first section, you will keep #x-section-1 otherwise you need to change #x-section-1 for the correspondent section

jQuery(".home #x-section-1").wrap("<a href='https://www.youtube.com/embed/joPjqEGJGqU?list=PLLtjKBfcXe9jQnydbCYKRwtVcFjMIwPRt'></a>");

That way when you click on your section the class should trigger the video in the lightbox.

Let us know how it goes,

Joao

[markwestParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi Mark,

My Bad I understood what happens now. Since the JS code wraps the your section in <a> the launch class needs to be on this <a> not on the section inside it.

So I updated your js to :

jQuery(".home #x-section-1").wrap("<a class='lightvideo' href='https://www.youtube.com/embed/joPjqEGJGqU?list=PLLtjKBfcXe9jQnydbCYKRwtVcFjMIwPRt&rel=0'></a>");

And now it works.

Hope it helps

joao

[markwestParticipant]

Hi Joao,

That’s great.

One more quick (I hope) question please.

Is it possible to move the lightbox close/fullscreen icons from the top left to the top right? Also, is it possible to change them from red to black on white?

Thanks for your help.

Mark

[markwestParticipant]

Hi,

I’ve found this article which I think will solve the problem of icon location, which just leaves changing their colour?

Thanks

Mark

Moving the close and fullscreen lightbox buttons

/*
// Moves the closing and fullscreen buttons for the lightbox closer to the lightbox frame
*/

.ilightbox-toolbar.light {
top: 5% !important;
left: 83% !important;
}

.ilightbox-toolbar.light a:before {
vertical-align: top;
}

[JoaoModerator]

Hi Mark,

Please add the following code to Appereance CUstomizer CUstom CSS

.ilightbox-toolbar.light {

    left: 96%;
}
.ilightbox-toolbar.light a.ilightbox-fullscreen:before , .ilightbox-toolbar.light a.ilightbox-close:before {
color: black;
}

Hope it helps

joao

[markwestParticipant]

Thanks Joao,

That’s perfect 🙂

Just out of interest, is there a full CSS class/id reference for the lightbox functionality please?

Have a great evening.

Kind Regards

Mark

[JoaoModerator]

Hi Mark,

I dont think so, you can inspect using Chrome Inspector or Firefox Firebug and find it out 🙂

If you are not familiar with it, I do recommend you starting to play around with it, it is a great tool and will allow you to have loads of freedom when manipulating your websites CSS. On the other hand, we are always here for you.

Cheers

[Author]

Posts