Vimeo Autodetect Broken with FancyBox V2

Hi @shaunbowen,

I just tested this, and far as we can tell, this is working fine for us.

Questions:

• Can you tell me how you are adding the vimeo link?
• When you say “video just opens with a message saying “sorry we’re having a little trouble” do you mean the lightbox opens and that message shows in the lightbox. Or does the link not open the lightbox (ie, maybe redirects you to vimeo).
• Any chance you can share a link to the page with the issue?

Thanks.

Hi there, I have tried inserting the link in multiple ways – copying the embed code, the share code and the direct Vimeo URL. The only way it works is if I change the Lightbox settings to Fancybox Classic Reloaded.

Here is an example page for you to run a test – currently set to Fancybox V2: https://snuk.mydomainis.co.uk/vimeo-test/

I have changed the URL for the test page above. Please use this one:

https://smart-websites.com/vimeo-test/

Hi – sorry for delayed response on your earlier reply. Looking at this now. I can duplicate the issue on your link. I’m wondering if it has to do with the type of link. We usually anticipate standard Vimeo share links like https://vimeo.com/181645979, while yours is a vimeo player link.

I’ll investigate with this particular link, and see if I can duplicate and fix. Will reply again when I have an update.

Just wanted to confirm I can duplicate this locally. The link works/opens with Fancybox Legacy and Fancybox for Fancybox Classic Reloaded, but not Fancybox V2. So it must be something about player links + V2 only. I’ll see if I can figure it out.

Hi, so I think I understand what is happening. It is an issue with the core Fancybox 2 code. Fancybox2 comes with some media helpers that help with certain media types, especially videos. Those helpers actually adjust/change the vimeo url. The changes they make are fine for the vanilla vimeo links (vimeo.com/123456), but they break player links (player.vimeo.com/123456).

I will include this in the next release, but if you would like to try the fix on your site in the meantime: access your website via FTP, go to wp-content/plugins/easy-fancybox/fancybox/2.2.0/helpers/jquery.fancybox-media.js, and change line 96 as below.

Change it from this:

matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,

to this:

matcher : /(?<!\.)(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,

You are adding an extra (?<!\.) right after the first /.

If you get a chance to test it before release, please let me know if it works. Otherwise just let me know after the release is out and you update.

It’s unusual that we are fixing vimeo by adjusting lines that Fancybox itself specifically added to make vimeo work.

Hi, I just wanted to follow and let you know I pushed a fix for Fancybox2 + Vimeo player links in version 2.2.8. On the assumption the issue is resolved, I’m going to mark this thread resolved. But please feel free to update and let me know if you are still having issues.

Hi there, thanks for working on a fix for this. Unfortunately it still doesn’t seem to be working for me.

On my test page https://smart-websites.com/vimeo-test/ the video still says ‘Sorry we are having a little trouble” and on another site the video starts to load and only plays the sound.

When I tried to use the navigation bar under the video to skip forward, it jumps to the next video (as if the next/prev buttons are covering the progress bar.)

• This reply was modified 4 months, 1 week ago by shaunbowen.

This sounds like two separate problems.

For the first one – on the link above where it says ‘Sorry we are having a little trouble’, that page is still having the same problem that was fixed. I know this will sound obvious, but can you please confirm you’ve updated the plugin, and that you are using version 2.2.8?

For the second one – playing with sound only – any chance you can provide a link? I must say I’m not sure how the lightbox would affect that, and I’m wondering if there’s a separate issue with the player. But it’s hard to say without seeing the issue.

If you are interested, I can possibly look at the issue more directly with you if you reach out at firelightwp.com/contact. Otherwise, I’m fine continuing to try to troubleshoot with you here.

Hi there, my apologies, I checked the same sites today and they seem to be working okay now. Not sure why, but maybe a browser cache issue.

The problem with the next/prev buttons (when you have multiple videos on one page) is still in need of sorting – the width of them is set to 40% and z-index is 10040, which means they prevent access to the progress bar unless you click in the 20% clear gap in the middle.

Hi @shaunbowen – can you tell me if the Vimeo gallery on this screen is working for you?

https://firelightwp.com/free-lightbox-v2/multiple-vimeo-videos/

Trying to determine the boundaries of what’s not working. For me nav is working, though there’s a separate, intermittent issue where if I navigate too fast a video will not load (not sure what that is). But whatever that is, it’s not a navigation issue. I’m wondering if yours may be nav + player links or something like that.

Hi there, that video gallery works fine for me, however the next/prev nav is still covering the progress slider. Please see screenshot below where I highlight the ‘next’ nav section using Chrome Inspector:

@shaunbowen – I see the issue. Basically the lightbox navigation hovers on top of the video controls, so you can’t click on or work with the video controls. I need to think about what the best solution is that for the long term – one that solves it here but doesn’t introduce unwanted changes when they’re not needed.

For now, I’m wondering if you can try adding the following CSS to your site? This reduces the size of the area for the lightbox nav controls. Note that while this will make your vimeo controls accessible, it means that to get the lightbox controls to show, you have to hover over a smaller space closer to where the arrows appear. This css will also apply to all instances of fancybox lightboxes on your site, not just where you’re using it open vimeo galleries.

.fancybox-nav {
    height: 150px;
    top: 50%;
    left: 50px;
    transform: translate(-50%, -50%);
    width: 100px;
}

.fancybox-next {
    right: -50px;
    left: auto;
}

@shaunbowen – On the assumption that the CSS above resolves the issue for you, I’m going to mark this thread resolved. Obviously, if you are still having issues please let me know and I’m happy to continue to troubleshoot. Thanks!

Hi there, sorry for the late reply to this!

I believe the following CSS would work better than your example above, as it will exactly sit above the progress bar and still give a large clickable area:

.fancybox-nav {
	font-size: 10px;
	height: calc(100% - 4em);
}
.fancybox-nav span {
	top: calc(50% + 2em);
}

The progress bar is 3.2em height and positioned 0.8em from the bottom, which gives us 4em.
The .fancybox-nav sections need to be given a font-size of 10px so that 4em gives the same value.
The arrows on the nav then need to be offset downwards by 2em, to keep them centred within the video frame.

Let me know if this works better for you too.