iframe error with ch-ua-form-factor Cookie Permission

Question

I am currently using a simple iframe in my webpage using bootstrap that is adapted to small screens (=youtube short) and large screens (=normal landscape video):

  <div class="container d-none d-md-block" style="max-width:1000px;height:30%;">

      <iframe width="1000" height="550"
        src="https://www.youtube-nocookie.com/embed/0...?&mute=1&autoplay=1&encrypted-media=1" allow="autoplay; fullscreen;">
    </iframe>

  </div>

  <div class="container .d-block d-md-none" style="width:95%;">

      <iframe width="400" height="500"
        src="https://www.youtube-nocookie.com/embed/G...?&mute=1&autoplay=1&encrypted-media=1" allow="autoplay; fullscreen;">
    </iframe>

  </div>

</div>

I have a warning/error message saying:

Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.

After investigation, it seems to be related to screen size: https://wicg.github.io/ua-client-hints/

But if I remove the classes for screen size like "d-none d-md-block", there is still the same message (might be due to a parent screen size config).

In addition to that, the error also appears if I remove all the iframe options and if I use www.youtube.com instead of www.youtube-nocookie.com.

How can I solve this problem?

Answer 1

I been getting same warning on my page containing an embedded YouTube video and I dig a bit deeper into the situation, just to discover is actually coming from their side, as the element violating the rules is inside of the embed. So I think the suggestion to ignore the warning is the best to follow.

Answer 2

This error refers to a permission policy that is not recognized by the browser. This can happen when the browser is updated and a new policy is now recognized.

To resolve this issue, you can add the permission policy ch-ua-form-factor in your request header to your server. e.g.

res.setHeader('Permissions-Policy', 'ch-ua-form-factor');