Lightbox video Pop Up

Hi, would like to have the video pop up (and be able to close the pop up after viewing) using the lightbox shortcode. I have tried the following code:

[image class="videoLightbox" type="rounded" src="image-1.jpg" link="true" href="//player.vimeo.com/video/84751465" alt="Text"]

[lightbox selector=".videoLightbox" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal"]

But so far when I click on the image it only loads the youtube link as a page, not as a pop up. Its not working the way it does in this tutorial video: https://www.youtube.com/watch?v=L0blDzlwvhQ. Please advise? Thanks

Ps. I also have pop ups not blocked in chrome…

Hi there,

The shortcode should be like this one:

[image src="http://via.placeholder.com/350x150" link="true" href="//www.youtube.com/embed/L0blDzlwvhQ" lightbox_video="true"] [lightbox]

Change http://via.placeholder.com/350x150 with the URL of the thumbnail image that you want to use.
Make sure that you see how I used the embed URL of the youtube and added the ID of your video at the very end of the URL to make: //www.youtube.com/embed/L0blDzlwvhQ. It is different than the normal URL which you used: https://www.youtube.com/watch?v=L0blDzlwvhQ.

I suggest that you read the Video Lightbox Setup section of the official article for more information.

Thank you.

Hi I’ve done exactly what you said and instead of a pop up window the following happens (the link goes to youtube and leaves the orig website)

Hello there,

Another support staff here on duty to serve you. :slight_smile:

There was just some missing attributes on the [lightbox] shortcode that needs to be added for it to work. Kindly update the shortcode you’ve put before into:

[image class="videoLightbox" src="http://via.placeholder.com/350x150" link="true" href="//www.youtube.com/embed/L0blDzlwvhQ" lightbox_video="true"]

[lightbox selector=".videoLightbox" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="false"]

Hope this helps.

1 Like

Hi Thanks for this but its still producing the same result (goes out of website and goes to youtube, no pop up)

Hello @Tore_Lande_67,

Thanks for updating the thread. :slight_smile:

I have tested the shortcode shared by my colleague @jumar and it seems to be working fine. I added the shortcode in Text and Clasis Raw Content element and Video in Lightbox mode is opening up fine. I have recorded a screencast that you can take a look. https://cl.ly/1d1N1C1s3C1R

However, while looking at the website that you have assigned in licence manager (URL in secure note) it seems that you are using X Theme 5.2.5 which is quite old. May I request you to update X Theme to latest version 6.0.4 as using old version of X Theme may cause compatibility issues. I suggest you to please take a look at our theme and plugin update guide:

Thanks.

Hey Prasant,

Thanks for the advice. Unfortunately its still not working even after the update.
The code as follows:[image class="videoLightbox" src="https://www.globalmusicgarden.com/wp-content/uploads/2018/04/LightboxVideo_AstronautGuitar.jpg" link="true" href="//www.youtube.com/embed/KaOC9danxNo" lightbox_video="true"] [lightbox selector=".videoLightbox" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="false"]

Using the text element, and turning off all plugins except cornerstone and revolution slider. I know we did some custom work back end to make the website faster, not sure exactly what, can this possibly affect the outcome?

Hello @Tore_Lande_67,

Thanks for updating the thread. :slight_smile:

On my end the shortcode you have shared is also working fine. Here is a video screencast. https://cl.ly/420W3w1X3P0t

You said that some custom work was done to optimize the page load time. Will it be possible for you to disable those changes and see if that fixes the problem. I also see that you are using LiteSpeed Cache plugin. Please try clearing cache and see how it goes. However, I still see you are using X Theme version 5.2.5. Can you please confirm whether or not theme has been updated? https://cl.ly/1y1q3q44313E

Thanks.

Hey Prasant,

Here are the codes used just so far, I think they are already turned off. As far as I know here is the proof that we have updated the theme, but not sure maybe we need to do it a different way if your data shows otherwise?

(// means it’s commented out, aka not in use)
In the functions.php I got the following:

// Remove query strings from static resources
// =============================================================================
function _remove_script_version( $src ){
$parts = explode( ‘?ver’, $src );
return $parts[0];
}
add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );

// Increase max upload size
// =============================================================================
//@ini_set( ‘upload_max_size’ , ‘64M’ );
//@ini_set( ‘post_max_size’, ‘64M’);
//@ini_set( ‘max_execution_time’, ‘300’ );

// Custom logged in and logged out menus
// =============================================================================
//function my_wp_nav_menu_args( $args = ‘’ ) {
//
//if( is_user_logged_in() ) {
// $args[‘menu’] = ‘logged-in’;
//} else {
// $args[‘menu’] = ‘logged-out’;
//}
// return $args;
//}
//add_filter( ‘wp_nav_menu_args’, ‘my_wp_nav_menu_args’ );

All files are compressed through cpanel.
It uses standard cloudflare caching.
That’s everything I can think off.

Kind regards,

Jon

Hello Jon,

Thanks for updating the thread. :slight_smile:

Yes, I can also see on your website style.css file that the same has been updated. I think some old configurations might have been showing up because of Cloudflare cache. https://cl.ly/1T0z0v0r0f2M

In case lightbox problem is still there, would you mind sharing login details (username/password) in a secure note for us to take a closer look.

Thanks.

Thanks, how do I send a secure note? (stoneage…)

Hi,

You can add it to your existing post using the key icon.

Thanks

HI, thanks here it is,

Hello There,

I have logged in and checked your site. Whatever I do, the lightbox is not showing in your page. I even deactivated LiteSpeed Cache plugin and still the lightbox is not working. Using the same code, I created a test page in my local testing server.

[x_image class="videoLightbox" src="https://www.globalmusicgarden.com/wp-content/uploads/2018/04/LightboxVideo_AstronautGuitar.jpg" link="true" href="//www.youtube.com/embed/KaOC9danxNo" lightbox_video="true"]
[x_lightbox selector=".videoLightbox" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="false"]

So far I could not replicate any issues at all. The video and lightbox shows in the page as soon as you click the image. Here’s how it looks like in my local test server:

I came up to think that this issue is caused by Clouflare. Do you have a CloudFlare account? Please login to CloudFlare and purge your site cache. You must also make sure that the JS/CSS in the Speed tab is not enabled. These settings must be changed in the CloudFlare account and not just in the Cpanel. For best results, you can check out the recommended CloudFlare settings from here: https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/

Hope this helps. Please let us know how it goes.

Thank you so much! We will try this. Yes we use cloudflare

You’re welcome as always.
Please let us know how it goes.

Hi, thanks we disabled cloudflare completely, but everything’s so slow. According to my colleague, lightbox is working in his computer, but it doesnt seem to be working in mine. Was wondering if its working on yours if you log in to our website again and click on the: Link
Thanks

Hey @Tore_Lande_67,

The lighbox in your site is working on my end.

Looks like your Cloudflare setup is the issue.

Thanks.

Thanks, is there a way we can still use cloudflare? Do we need to switch to another cdn?
Thanks so much

Hi Tore_Lande_67,

I’m not sure if you followed this guide regarding how to setup Cloudflare with X or Pro theme or not? if you didn’t, then please do.

Also, if you have any plugin installed on your website that can do JS minification, please try to disable this feature, as it’s more likely to cause JS conflict between your installed plugins/themes.

Thanks