[444mediaParticipant]

I want to create a pop up video when a button is clicked. Is that possible without having to buy an additional plugin/add on? If so, how? I want to have a button, likely within a Slider Revolution slide, saying something like “Watch Our Video” and when clicked an iframe popup window opens up and plays their sales video. I believe I have seen a Cornerstone add on for something like this at Code Canyon, but wanted to ask if that’s the only way (and if so, please remind me the name of that add on)

Thanks!

Chris

[FriechModerator]

Hi Chris,

Thank you for writing in! Actually you can do that with the X|Theme’s built-in lightbox. Please setup your button on your slider, link your button to your video and add a class x-btn-lbx to your button. And then place the lightbox shortcode below anywhere on the page.

[lightbox selector=".x-btn-lbx"]

You can paste that on a RAW Content element or on a Text Widget.

Let us know how it goes.

Cheers!

[444mediaParticipant]

OK…so I added a button layer to the slider at http://www.plugilo.com/plugilostage/ (just for now named it How Plugilo Works and haven’t styled it or placed it where I want yet); in Slider Revolution, under “Attributes” for the button layer, in the classes field I added “x-btn-lbx”; then under “Actions” I enabled clicking a simple link and entered the YouTube URL to the video I want in the pop up. I also selected it to open in a new window (if that matters). I also added a raw content element using cornerstone and placed it below the slider and added the short code [lightbox selector=”.x-btn-lbx”].

Still didn’t work. When I click the button, YouTube opens in a new tab and plays the video.

Is the issue with the link…using a youtube link?

Thanks

[Paul RModerator]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[444mediaParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

I have changed a bit

I used a text layer with X button shortcode instead of Rev Slider Button.

I also added a class lightbox-btn to the button to use as a lightbox selector and put the video in autoplay.

It is working now.

How it helps

Joao

[444mediaParticipant]

Thank you so much Joao! Just a few issues:

1. I am using Chrome personally as I develop this site, and for some reason, even with popup blockers turned off and indicated to allow all popups from the site specifically, it still doesn’t work on Chrome. Though I do know it does work because it works on Edge…so I’ve seen it. Any tips on getting it to work on Chrome (haven’t checked Firefox or Safari yet)

2. When I saw it work in Edge I noticed that it opens full screen. Is there anyway of adjusting the size of the iframe so it’s only a small rectangle in the middle of the screen? I’ve seen that on tons of sites.

3. Just curious why is the button seemingly a text layer with a long string of code? I assume I just change the URL in there when the client sends their MP4 video?

Thanks for the additional help!

[Rue NelModerator]

Hello There,

Thanks for updating in!

#1] I am using Chrome and it is working perfectly on my end. You can check out my screenshot here: http://prntscr.com/enf627
Please try to clear your browser cache or using Chrome’s incognito mode and test your site again.

#2] To make the iframe smaller, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

body .ilightbox-holder div.ilightbox-container {
    max-width: 90%;
    margin: 0 auto;
}

#3] We use a text layer because it would be complicated if we use the default button layer. Yes you just have to change the url of the video when your clients wants to change it.

Hope this helps,

[444mediaParticipant]

Hi,

I need a bit of help with the style of the button you guys created for me that activates the pop up. As you can see on the home page (above the fold) the two button there just at the fold, “How Plugilo Works” and “Contact Us” don’t match stylistically. How can I style the “how plugilo work” button to match the other one (or even vice versa)? The main thing I think the client is going to care about most is the font. I need that to be Titillium Web. But of course button size, color, style should all match too.

They were just created in two different ways, so not sure what to do to get them to match.

Thanks for your help!

[ChristopherModerator]

Hi there,

Please update contact us button to :

[button type="flat" shape="square" size="mini" href="#" title="Example"]Contact us[/button]

Hope it helps.

[Author]

Posts