How to disable scrolling when "touching" the built-in iframe?

Question

I am making an HTML5 mobile application. I turned off scrolling (and turned it on in certain parts) and all this is good, but the problem starts when I embed a YouTube video via iFrame. It seems that when the user clicks on the iframe, the whole page scrolls, and I cannot find a way around this. Adding event listeners does not work.

Answer 1

You really can't control what happens in the iframe.

But if you want to be a little smart, you can place the elements directly above the iframe, such as a div or a transparent canvas or whatever, that you want to catch all the events so that the user simply cannot click the iframe.

Not the most ideal, it means users cannot click buttons on a YouTube video, but this is probably your only real option.