I'm facing a very strange problem. I'm loading dynamically Google Charts when users are clicking on specific button. Everything works fine except that when I have YouTube videos in my page.

If I click in the first 10 seconds on one of the button that generates a chart, the chart execution is delayed. If I wait until YouTube has finished loading, the chart is loaded very fast.

I embed my videos like this:

<iframe loading="lazy" src="https://www.youtube.com/embed/WTtyAey5NCY" width="100%" height="400px" title="YouTube432"></iframe>

When loading my page, I see first those requests made by YouTube (even if the videos are not in the viewport!):

Those calls correspond to the videos I have in the page but after those first line, I get the following calls:

and then finally this:

When all YouTube events have finished sending data, my scripts are executed. If I try to execute scripts before the end of those events, they are put on hold until the events are completed.

In my CSP I have this:

Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googleapis.com https://*.googletagmanager.com https://www.google-analytics.com/ https://www.google.com https://cse.google.com https://*.gstatic.com https://www.youtube.com/"

YouTube calls should not be blocked so I don't know why YouTube is doing this, it used to work one week ago. Should I block those calls with CSP? If yes, how?

Or is there something else I should do to avoid having all those calls?

Thanks Laurent