Question 72924 in Reactjs Question posted in
The new location for the React Documentation can be found here.

iframe causing a lot of cookies issues – Reactjs

I’m trying to embed a video on my NextJS website by using <iframe. The problem is it causes a lot of cookies issues in Chrome browser. Plus the performance dropped significantly.

<iframe
  src="https://www.youtube.com/embed/r9jwGansp1E"
  allowFullScreen
></iframe>

enter image description here

I also tried to use aspect-ratio plugin but I got the same issues and the page was rendered blank.

<div className="aspect-w-16 aspect-h-9">
  <iframe
    src="https://www.youtube.com/embed/r9jwGansp1E"
    allowFullScreen
  ></iframe>
</div>

The question is am I doing it right? Or another way should be used to embed a video and avoid issues?

Tags:

4

Answers


  1. 0

    It would be better to use a library such as react-player to embed videos instead of using iframes, as iframes can sometimes result in cross-origin issues.

    Login or Signup to reply.
  2. 0

    First, you won’t be able to solve this warning, because you cannot set the sameSite attribute as youtube is a third-party service.

    If you have this issue in your local environment don’t worry, it should be gone when you deploy to a production server with HTTPS, it probably has something to do with the HTTP protocol.

    Login or Signup to reply.
  3. 0

    You might want to look into YouTube iframe player API.
    There is a really good sample on this page:
    https://developers.google.com/youtube/iframe_api_reference

    Login or Signup to reply.
  4. 0

    There is a resolution inside the very error.

    Resolve this issue by updating the attributes of the cookie:

    • Specify SameSite=none and Secure if the cookie should be sent in cross-site requests. This enables third-party use
    • Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.

    Youtube.com has a ton of cookies. That is why you are recieving such an amount of errors.

    Try to read the complete error next time 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search