Call-to-Action Header Button: Open Self-Hosted Video in Lightbox

Hi,

Similar to this example: https://demo.athemes.com/sp-business/ I am trying to use the Call-to-Action button to open a self-hosted video in a lightbox. I researched the plugin “Video PopUp” but would need to be able to define a class somewhere. Is there a solution to this problem?

Thanks in advance!

Best,

Sven

Does anyone have advice, I’d really appreciate it!

I have found somewhat of a solution in this threat:

Popup from CALL TO ACTION BUTTON - Sydney - aThemes Forums

However, I do not necessary like the style of the popup. Is there a solution that does not open a whole new tab, but instead looks more like the example in the demo link for the sydney theme that I provided before?

So basically instead of the popup I am trying to achieve a Lightbox.

Hi,

​Please accept my apologies for the delay in response. I really appreciate your patience.

It would be better if you can share the plugin link you’d like to use, so I can get clearer picture?

Regards,
Kharis
aThemes Support

Hi Kharis,

no worries, and thank you so much for taking the time to help me out! I actually do not have a specific plugin in mind. I developed my first website using WordPress ( Neuer Tab (qreativraum.de) ). I think that the video that I placed below the header does not look like a video. As an alternative solution I was therefore thinking to instead have the header call-to-action button say “Watch to learn more” and by clicking a lightbox opens. Similar to the demo from aThemes that I linked to previously in this threat.

When I researched possible solutions I first found this plugin: Video PopUp – WordPress plugin | WordPress.org. It is a requirement that the video is self-hosted (MP4) and this plugin seems capable of doing that. However, while I understand how I would use this plugin to insert a lightbox video into a post or a page, I am not sure how to achieve so in the header since I can only define a link for the call to action header button.

When doing research in this forum I found a solution that I linked to in a previous comment in this threat, and which allowed me to create a link that would open a pop-up window:

However, this is still not the lightbox effect that I was aiming for. I definitly think the lightbox effect looks better and was wondering if that could be done as well. Thanks again for your time and help, I definitly appreciate it!

Best,

Sven

Hi Sven,

Try this plugin I just developed for cases like yours.

You can find the instructions in the plugin’s readme. Please let me know here if you get any further difficulties on using the plugin.

Regards,
Kharis
aThemes Support

1 Like

Hi Kharis,

First off, thank you so much! I definitly did not expect that you would develop a plugin. This made my morning! The plugin is working perfectly and could not be any simpler to use. Basically after installing the plugin and aktivating it the link would automatically open in a lightbox without any further work. I definitly recommend adding this to the WordPress repository!

I do have some feedback for your readme instructions. You specify to pace the “Youtube” link into the button URL area. However, my video is MP4 and it still worked just fine. I used the link generated by WordPress that can be found in the media library. I’d recommend editing the instructions to clarify that any video link (YouTube, Vimeo, Self-Hosted) works in step 4.

Again, thanks so much, and I hope this will be valuable for others as well!

1 Like

Glad to hear that the plugin helps you.

I’ve updated the plugin with shortcode functionality, so you can use the same button to put somewhere else in your page or post.

Regards,
Kharis
aThemes Support

I would like to chage the size of the button. How can I do that?

Hi Ronaar,

try this:

.roll-button.button-slider{
width: 80px;
height: 40px;
}

Of course you need to change the px numbers depending on your preferences.

As alternative to px you could also use following CSS Units: CSS Units (w3schools.com)

Hope that helps.

Cheers,

Sven

Hi @Ronaar,

I wrote you about this already in your other thread: Sydney Child mobile menu button hidden

I hope that helps.

Regards,
Kharis
aThemes Support