Position issue in Firefox when reopen a video lightcase

[aquelfulano]

Hi,

Thanks a lot for the plugin.

I've just experienced an issue with the lightcase when I use the Firefox browser.

It happens when I display a video in the lightcase (I only tried with Youtube videos), then I close the window and I reopen a new one video in the same page.
What happens is that the margin-top of the #lightcase-case element in the css inline style is set to 0 (margin-top: 0) instead of the regular autocalculated margin-top.
If I resize the viewport, then happens the recalculation and the issue is solved. But if I just reopen a new video lightcase, this is positioned in a wrong place.
I only have experienced in Firefox (I've tried Chrome, Safari and Edge), but is disturbing me to get this wrong position in this very foreseeable behavior in my page.
You can try this issue in the next address: https://marinamunoz.es/videos/

I guess maybe I can do something with this function:
lightcase.resize();
to solve that, but I dont find the way and I need some help at this point.

Thanks a lot for your help and very thanks a lot for the plugin.

I will very appreciate any kind of help.
Thanks.

[cbopp-art]

Hi @aquelfulano

I only have Firefox with OSX to test your issue and I couldn't experience any wrong behavior regarding the position of the video. However, you can try to make use of one of the hooks and call the resize function there.
https://cornel.bopp-art.com/lightcase/documentation/#hooks
https://cornel.bopp-art.com/lightcase/documentation/#resize

Example:

$('a[data-rel=lightcase]').lightcase({
	// Will be called right before the content will be displayed
	onBeforeShow : {
		callResize: function() {
			lightcase.resize();
		}
	},
	// Will be called after everything is loaded and visible
	onFinish : {
		callResize: function() {
			lightcase.resize();
		}
	}
});

[aquelfulano]

Thanks for the response.

I tried that, and at the first it didn't work for me.

But at last I tried to delay a little bit the function within a setTimeout method in the "onBeforeShow" hook, and finally worked.
This solution results in that the ".lightcase-contentInner" element was set the opacity as 0, so I had to set the opacity to 1 within the same setTimeout.

$('a[data-rel^="lightcase:video"]').lightcase({
            onBeforeShow : {
                callResize: function() {
                    setTimeout(function(){
                        lightcase.resize();
                        jQuery('.lightcase-contentInner').css('opacity', '1');
                    }, 100);
                }
            },

        });

For giving you more information about the issue. It only happened for me when reopening video lightcases. And working fine for the image lightcases.

And one more time, thanks for the response.