How to correctly imbed YouTube videos in HTML

February 21, 2024

I was trying to imbed a Youtube video in my website using iframe tag. However, many warnings appear on the console when using Chrome, such as:

Reading cookie in cross-site context will be blocked in future Chrome versions

I also read online that using iframe is discouraged due to security reasons.

To avoid breaking changes and security issues, I wonder if there is a better and safe way to imbed a YouTube video in my website apart from adding a video tag, as blocking external cookies is not possible as of my knowledge.

Here is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=huEs0X_fKX95LMeh"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>
  </body>
</html>

This is the complete warning log:

Reading cookie in cross-site context will be blocked in future Chrome versions

Cookies with the SameSite=None; Secure and not Partitioned attributes that operate in cross-site contexts are third-party cookies. In future Chrome versions, reading third-party cookies will be blocked. This behavior protects user data from cross-site tracking.