Problem with custom cursor on video embed

Design help Custom code
1

Hi everyone!

I’m new on webflow and this is my first topic. I did not find the solution on the forum so here is my problem:

I’ve created a custom cursor on my CMS site, it works perfectly on all my pages and all my elements. BUT, on my CMS project pages, I have videos from vimeo and when I hover them, my custom cursor gets stuck at the edge of the div and I can see the default cursor even if it has been set to none.

I can’t use my custom cursor because of this problem. So please, do you have any idea or a solution? Maybe a custom code to add somewhere?

Here is my public share link: https://preview.webflow.com/preview/distorsionfilms?utm_medium=preview_link&utm_source=designer&utm_content=distorsionfilms&preview=3187057b92c666633f620df8be8cbca0&mode=preview

A huge thanks for your help,
Déborah

2

Basically you need to remove the custom cursor (won’t work over an IFrame) when the pointer enters the IFRAME. See → javascript - Hide custom cursor when mouseover on iframe - Stack Overflow

Alternative: You may need to use custom code for the video elements versus the IFRAME that the video element ends up generating via Embedly.

3

Thank a lot Jeff!

I can try the 1st solution but unfortunately, I don’t know how to use javascript and I’m afraid to made a mistake… Do you have time for explain me ?

For the second solution, same problem, I don’t know which custom code i have to use…

Thanks again for helping me!
(And sorry for my english!)

4

I choose to provide custom code / development as a billable service for commercial projects. Maybe another forum member will help you implement this. It’s really pretty straight forward. Of course you have an alternative, namely not using a custom cursor.

5

Hi
I know this is an older query, but I’ve searching for the solution recently and found a workaround I thought I’d share to the thread. After some trial and error all you need to do is insert a DIV containing some text (make it transparent) into the same container the embedded video or CMS is. The custom cursor should now function properly over these items.
Cheers
Gary

6

Hi, I tried your method but it didnt quite work. :sob:

Is the DIV with text just simply positioned right underneath the video block? or does it need to be positioned in some special way?

Thank you!

7

Hi there,
Apologies, I should have been clearer.
I’ve attached an image of the structure.
Basically, create a DIV, then within that put another DIV containing the embedded image. Within the first DIV you created add another DIV set to ABSOLUTE which contains some text (which you colour transparent - don’t hide it). Make sure the DIV with the text is UNDERNEATH the embed image DIV.
Hopefully that should do the trick!
Cheers
G

Screen-Shot-2022-01-01-at-7.19.38-pm
Screen-Shot-2022-01-01-at-7.19.38-pm856×348 15.9 KB

2 Likes
8

Hi Gary,

Sadly, it didn’t work for me, and I suppose your method works only when you do not need interactivity within an iFrame. I’m using Spline alongside a custom cursor in one of my client projects — I still didn’t find a solution to be able to use a custom cursor with an iFrame (Spline in my case).

Maybe I’m wrong about your solution and implemented it poorly (so it actually works with interactive iFrames) — if so, then I’ll appreciate the read-only link.

If I’m right, then why do you need a transparent text? Just a div with absolute positioning should do a trick (worked in my project, but, again, no interactivity).

9

Hey there, did you ever find a work-around solution to this? I’m having the same issue with my Spline embed too.

10

Hi, here to say that the workaround provided by @Propella is working properly!

lil structure to make it clear

-Div wrapper (position relative)
–Div with video embed (position relative)
–Div for workaround (position absolute 0% on all sides)
— Text for workaround ( color opacity 0%, size width and height 100%)

11

Spend the whole day trying to get custom cursor to work over film link, couldn’t get it to work, then tried this and it worked BUT you can’t click the vimeo play button so its useless. So does anyone have a solution for this. Its so crazy complicated for something that should be simple!!! I’m probably going to Framer after this frustrating episode