YouTube iframe embed Violation: non-passive event listener to a scroll-blocking 'touchstart' event

Question

I'm embedding a youtube iframe on my website that is throwing the following warnings in my console:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952 base.js:4560

[Violation] 'setTimeout' handler took 115ms www-embed-player.js:583

I'm sure it's this component, as when I comment it out, the warnings stop. I would like to get rid of these warnings. How to do this?

<iframe width="100%" height="300px" src="https://www.youtube.com/embed/wHcyxs6pGIk" frameborder="0" allow="accelerometer; autoplay; gyroscope; picture-in-picture" allowfullscreen></iframe>

Answer 1

I have been having the same error. This is the only post I've seen addressing the issue. In the link the warning gives it directs you to check out : Github EventListenerOptions/explainer.md

In the document it says the following:

There are a few more complicated scenarios where the handler only wants to suppress scrolling under certain conditions, such as: ... A UI element (like YouTube's volume slider) which slides on horizontal wheel events without changing the scrolling behavior on vertical wheel events. Since there is no equivalent of "touch-action" for wheel events, this case can only be implemented with non-passive wheel listeners.

It seems this error is inevitable due to YouTube's volume slider.