Solved: Bridge theme Qode Slider Button to open Video in Lightbox

When you want the Qode slider of the Bridge theme for WordPress to open a YouTube video in a lightbox when clicked on the slide CTA button, you are left on your own, since the Qode Interactive are saying that the buttons are not intended for lightbox use and you could only pop up videos in a lightbox in other, custom URLs.

Which is a shame, and funny. Since they have the lightbox option built in to their theme.

I spent a few good hours into trying to find a solution, using PHP and JavaScript to replace the final HTML and ran into errors trying. Until I tried the easiest and silliest method.

How to enable the pop-up lightbox video in the Bridge theme Qode slider button, as a workaround?

In the version 17 of the Bridge theme the Qode Slider editor allows you to type the button text and add the corresponding link that the button needs to take the visitor to. You need now your full URL of your YouTube video. To get the full URL of your YouTube video, visit the video on YouTube and copy it’s address from the browser address bar.

Paste the Youtube video URL to the Link field.

Qode slider link and button text setup

Now here comes the trick.

Looks like this field can store any kind of data and publish it into your website HTML a tags href attribute value (as href=”here-the-value”).

To pop up a lightbox, the attribute rel=”prettyPhoto” needs to be added to a HTML link on your site.

Since there is no way to add it to the button link attributes, we will just simply add it after the YouTube URL in the Link box so that we do not add the last quotation mark (since that is hard coded in PHP).

Clever, right?

So here is how your Link field value should look like:

 

https://www.youtube.com/watch?v=87FNULqVQYs" rel="prettyPhoto

 

qode-slider-bridge-prettyphoto-video-youtube

And the HTML of your button shall then look like this:

html-qode-bridge-slider-lightbox-video

Done!

That’s how you can easily pop up YouTube videos from Bridge theme Qode slider buttons in a lightbox.

Post Author: Tom Pai