How can I fix the issue where my custom cursor gets stuck at the edge of the div on my Webflow CMS project pages when hovering over Vimeo videos?

When using a custom cursor on Webflow CMS project pages, it's possible to encounter an issue where the cursor gets stuck at the edge of a div, particularly when hovering over embedded Vimeo videos. This is typically due to interactions between the custom cursor and the iframe used for the video.

​

1. Check and Adjust Z-Index

• Ensure that the custom cursor's z-index is higher than that of the embedded Vimeo video.
• Go to the Styles panel in Webflow, select your custom cursor, and set a higher z-index property.

​

2. Use Pointer Events

• Disable pointer events on the Vimeo iframe to ensure the cursor doesn't get affected by its presence.
• Select the Vimeo video embed and add custom CSS via the Project Settings or the Page Settings.
• Use CSS to apply pointer-events: none; to the Vimeo iframe.

​

3. Test Different Browsers

• Sometimes particular browser behaviors can affect the displayed interactions.
• Test your site on multiple browsers to identify if it is a browser-specific issue.

​

4. Re-evaluate Custom Cursor Script

• Review any custom JavaScript used to achieve the cursor effect.
• Ensure that the script accounts for iframe content correctly and does not introduce any constraints near the div edges.

​

5. Experiment with Alternative Embedding Methods

• If the issue still persists, try different methods of embedding the Vimeo video, such as embedding directly through Webflow without a custom embed code.
• This can sometimes change how the video interacts with other elements on the page.

​

Summary

To solve the issue of a custom cursor getting stuck at the edge of the div when hovering over Vimeo videos on Webflow, increase the z-index of the cursor, disable pointer events on the iframe, test on multiple browsers, and verify your custom JavaScript.