Hello,
So, I have a background video on my website, and every time I press the space bar on my keyboard (to play and pause the video), it appears a very weird circle line on top of the video. Does someone has any idea what this is?
Many thanks!
Here is my site Read-Only: [LINK][1]
Heh that’s a weird one. I’d probably show this to Webflow support.
What you’ve done is make your Play / pause button the size of the entire video, and the blue circle you’re seeing is the outer border of your custom button SVG, expanded to fill the space of the that button area.
It seems like there is some kind of micro-interaction happening with the buttons, and the animation design doesn’t expect your unusual design case where the button is screen-sized.
Remove that custom class on your Play / pause button, and the problem goes away.
But aside from that is a second oddity which is that the spacebar triggers it.
That shouldn’t happen naturally. Normally, a browser should scroll when you press the spacebar, but it can be overridden by javascript.
My working theory is that the WF team began building a spacebar control for background videos to make play/pause convenient, but for some reason the micro-interactions aren’t happening the same way as when you click the button, and you’re getting the screen-sized button result. Seems like it may have accidentally been shipped in an unfinished state?
Yea that makes total sense. Thanks so much for your help Michael!
Really appreciated it.
