Cloudflare Video don't work inside Framework7

Hi everyone, I can’t understand what I’m doing wrong, I tried to include the Cloudflare streaming service in a simple page made with Framework7 V4 and the video doesn’t seem to be able to load the data for some kind of restriction, thinking it was a problem domain, I tried to build a simple HTML page and including the video, it works perfectly.

In practice, to include the streaming service, cloudflares say they use this code:

<stream src = "5d5bc37ffcf54c9b82e996823bffbb81" controls preload height = "240px" width = "480px"> </stream>
<script data-cfasync = "false" defer type = "text / javascript" src = "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js?video=5d5bc37ffcf54c9b82e996823bffbb81"> </script>

the page that works is on https://f7.lhsgroup.it/test.html (without Framework7), while the one that doesn’t work (with Framework7) is https://f7.lhsgroup.it/.

Can anyone help me make cloudflare videos work?

This code can’t work in dynamically loaded pages, because such inline <script> tags can’t be executed in content that added dynamically (browser security policy). I guess you need to use some Cloudflare’s APIs to do that

I’m not sure that the problem was that, maybe I will have this problem when I load the pages dynamically, but in this case the code is directly in the main index.html of the site and the error is observed, it seems that it goes to look for a local resource in the cache, it seems more a service worker problem

Hello,

Cloudflare videos <script> file uses web workers to play videos. But your Content Security Policy does not allow executing web workers.

Add this directive to your CSP meta tag:

Hello,

Cloudflare videos file uses web workers to play videos. But your Content Security Policy does not allow executing web workers.

Add this directive to your CSP meta tag:

worker-src ‘self’ blob:;

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:; worker-src 'self' blob:;">