I-frame Video-Shift?

[piokylo]

Hey, Dude

Love the plug-in perfect for what I need thanks a lot.
I'm just getting a weird shift in the video inside the viewport when I hover the mouse over certain parts of the screen. Any ideas why this is or is there any info I could send you to help solve this issue?
https://gph.is/2KtLPyK

[piokylo]

I think I placed it in okay?
https://user-images.githubusercontent.com/26471643/40168665-ee8d4e2c-59bb-11e8-8c6d-7f78fe106549.JPG

[jsor]

Hard to say from just the images. Could you setup a reproducible test case?

[piokylo]

I'm new still learning Javascript so it would be difficult for me to isolate the problem. I can link you the site I'm trying to build though. I'm using lity for the work section links, when you click on the first link the lity pops up and works fine its just when you hover over the element it "jumps"?
http://calvindoyle.eu/

[sampnorris]

@piokylo

Today I noticed the same thing, and it seems to happening to videos that were working previously.
I noticed the shaking happens inside the iFrame - so this might be a change in the YouTube embed and less a Lity issue - but likely a combination of both.

I played around with some positioning to try and fix it with no luck - but even so - if the issue is inside the iFrame then that wouldn't be possible to fix with CSS alone.

I only noticed the shaking on Chrome - Safari is fine.

My solution in the end was to upload the videos to Vimeo instead and it works like a charm. Obviously that isn't a solution for all.

[ghost]

I've the same annoying problem in Google Chrome.

[lsimatt2]

Seeing the same issue, only in Google Chrome.

[ghost]

I think the problem happens on the local server.

The same code on Codepen, for example, does not present any problems:
https://codepen.io/andreaballerino/full/deaEOa/

I think this is the issue.

[lsimatt2]

I see that is with a Vimeo link. Ours is with a YouTube link. I also notice that YouTube has changed the structure of the links they overlay on the video, which may be related to the issue.

[ghost]

Maybe, but with Youtube also works:
https://codepen.io/andreaballerino/full/deaEOa/

[nr1q]

I have a working example on production (click on the play button), I'm seeing it in Chrome 66.0.3359.181 on OSX 10.11.6 and Android 7.0, the version of Lity is the latest 2.3.1 ...fortunately Firefox and Safari looks just fine.

Bug happens with both Youtube and Vimeo links.

[piokylo]

Thanks for all the help guys, I ended up using something else in the end, as I was struggling to define the problem. I hope to come back to this when I've got a better grasp of javascript. Thanks again for all the replies, fantastic community!

[nr1q]

I've found a related issue in another lightbox plugin, tested the suggestion of squire2k and it works!

[ghost]

Yes Enrique, I can confirm 👍

Thank you.

[nr1q]

Thanks to @squire2k, @jsor and all the community. :)

@piokylo try overriding lity's default styles with this:

.lity-iframe-container iframe,
.lity-content:after {
  box-shadow: none;
}

[lsimatt2]

Nice! Fix successful over here.

[ssethubalan]

Looks like its fixed in Chrome v67