If you try to embed a YouTube video using the page URL youtube.com/watch?v=... directly, the browser may refuse to load it in the iframe and show errors related to X-Frame-Options or security policies.
The solution is to use the URLs designed specifically for embedding.
YouTube videos: use the /embed/ URL
For a normal video, the correct URL looks like this:
https://www.youtube.com/embed/VIDEO_ID
Where VIDEO_ID is the video identifier found in the original URL.
YouTube live chat: you need embed_domain
To embed the chat of a live stream, you need to use the live_chat endpoint and specify the exact domain where it will be shown:
https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=www.example.com
The embed_domain value must match the domain of the page that contains the iframe. If it does not, the chat will not open.
<!-- YouTube video -->
<iframe height="315" width="500" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
<!-- chat of a YouTube live stream -->
<iframe height="300" src="https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=yourdomain.com" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
<!-- VIDEO_ID is your video's ID, yourdomain.com is the domain of the page containing the iframe -->Watch out on mobile
YouTube states that the embedded live chat is not available on the mobile web. If you are designing a page for smartphones, plan an alternative or a direct link to the live stream.
Why X-Frame-Options appears
Not every URL can be loaded inside an iframe. The site providing the content can decide, through security headers, whether and where it can be embedded.
That is why you should not try to “force” the browser or get around the header: use the embed URL provided by the service.
If you need to integrate videos, chats, widgets or external services into a web project, see also my development and integration services.