I'm trying to embed a youtube livestream chat onto a webpage on my website,
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v=hHW1oY26kxQ&embed_domain=localhost" width="480"></iframe>
I'm trying this, but the chat doesn't show up at all, if tried doing embeded domain using a real domain I own, but that doesn't work either.
It seems to me that YouTube disabled the feature to embed a live chat on external websites, but then forgot to update the documentation. Or alternatively, there could be an unfixed bug that broke this feature.
2021 update: chat embedding works again. Uses the same syntax as before. As per a helpful comment below.
Details
The YouTube knowledge base still says that embedding a live chat iframe into an external website is still possible, using a URL like the one you posted (see here, in section "Embed Live chat").
However, when trying that and looking into the browser's console, you will see a message like this:
Refused to display 'https://www.youtube.com/live_chat?v=12345&embed_domain=example.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
You can also see that x-frame-options: SAMEORIGIN header in the "Network" tab of the browser's developer tools when looking at the response to the https://www.youtube.com/live_chat?… request.
This means that YouTube does not want a browser to embed this into an iframe except when embedded on youtube.com itself. (On YouTube itself, this embed code still works: when you inspect the source code of any currently streaming live video on YouTube, you will find that the live chat window there is made with that same /live_chat?… request, in an iframe.)
Additional indications that this feature has been removed:
The YouTube documentation mentions:
The Live chat module only exists on the YouTube watch pages — it does not follow embedded players. (source)
I believe that's the new part of the documentation, and the section "Embed live chat" further down is outdated.
This tutorial from 2016 uses the documented URL format to embed an example live chat near the bottom, and it now shows the same "Refused to display […] in a frame because it set 'X-Frame-Options' to 'sameorigin'." Assuming that this worked in 2016, something must have changed on YouTube's side.
This Reddit thread tells how somebody's embedded live chat suddenly stopped working in early September 2018 – so shortly before this question got asked.
Alternatives
You could use the YouTube Livestream API, in particular the LiveChatMessages endpoint, to get and create chat messages. There are probably open source libraries around to help with this. So far, I found this one (able to display but not create chat messages).
You could embed your own chat, either installed on your own server or a cloud-hosted livestream chat solution. This solution can also provide features that YouTube live chat does not provide, such as allowing anonymous visitors to post.
You could reverse proxy the https://www.youtube.com/live_chat?… URL, forwarding YouTube's response but with the X-Frame-Options header removed.
If you only need a solution for one or a few computers, you could use a browser extension to remove the X-Frame-Options header from YouTube's response. See this question.
This appears to have to do with the introduction of this change to iframes, at least when I had this issue.
To fix this, I would suggest the use of a script like the following:
<script>
let frame = document.createElement("iframe");
frame.referrerPolicy = "origin";
frame.src = "https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=" + window.location.hostname;
frame.frameBorder = "0";
frame.id = "chat-embed";
let wrapper = document.getElementById("chat-embed-wrapper");
wrapper.appendChild(frame);
</script>
Where chat-embed-wrapper is the parent of the iframe with the id chat-embed and VIDEO_ID (in the frame.src assignment) is the id of your target video. You'll have to modify this a little for your setup, but this is the general case solution.
Simple solution for Angular :
HTML part :
<iframe frameborder="0" height="470" [src]="url" width="780"></iframe>
TS part :
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/live_chat?v=[YOUR_LIVESTREAM_ID]&embed_domain=' + window.location.hostname);
}
I'm not sure if you got this working in the end? We have managed to get it working on our site using this iframe, hope it helps you:
<iframe src="https://www.youtube.com/live_chat?v=YourVidCodeHere&embed_domain=www.YourDomainHere.com"width="100%" height="600"></iframe>
I hope that helps:) PS it doesn't work on mobile (YouTube said they have removed this feature from mobile), but it does work on desktop and tab.
Best wishes.
I can confirm this indeed works. However, I received the same X Frame error when embed_domain had the value "example.com" even though the url of the page started with "https://www.example.com". i.e. ensure the value matches window.location.hostname. Addison Crump's workaround could work for this if you do not have canonical host redirection working.
When something is shared from youtube to facebook, facebook is now showing the youtube html5 player.
If you look up one of their urls (https://www.youtube.com/watch?v=uuS5ZyQhvsk) in the open graph debugger you can see that they are now providing open graph meta data for their html player as well as the flash one.
I also have a player that sits in an iframe, and am now including the same tags that youtube is, minus the flash ones as we don't have a flash player, but it isn't working and facebook is giving me this error which doesn't make sense:
Share has playable media but will not play inline because it would cause a mixed content warning if embedded. Add a secure_src or make the video src secure to fix this.
This is the information facebook is reading:
This is the url as an example that is generating that error: https://www.la1tv.co.uk/player/124/260
All I can think is that Facebook has made some kind of deal with youtube and this isn't available for everyone yet, but that isn't clear from that error.
All of the content on our site is served over https.
Anyone know what's going on or got this working?
I can't find any documentation anywhere on facebook how to do this.
I posted a similar question a while back when I was trying to get this working but at this time youtube was still only providing the flash player to facebook.
It looks like someone else was having a similar issue here.
According to WizKid this is currently in a trial period for YouTube and hopefully will be rolled out to everyone at a future date.
I am working on a site that will allow users to upload their videos on my site, for example a dance performance. I am using <iframe></iframe> to embed video. Everything was going fine, but suddenly I noticed YouTube is restricting some videos to play on my site.
In my case the error was:
I know some users have asked similar questions like 'why it is happening' etc. I know it has to do with some copyright issues, for example a dance performance may have a background music playing which happens to be someone others property. The thing is, I am not 'claiming' copyrights and even, not me but my users will upload their videos from their YouTube accounts(using URL).
So Is there anyway to play all those videos like if I can request YouTube to let my site play those videos with a disclaimer explaining that my site doesn't have copyrights of these videos?
Does using iframe to point at the non-embedded youtube widget work? If so you could use javascript to extract the player from the regular youtube.
Not sure about the legality of that.
What are you trying to do? Potentially you could use the youtube api and make a mobile app that is not embedding videos.
When something is shared from youtube to facebook, facebook is now showing the youtube html5 player.
If you look up one of their urls (https://www.youtube.com/watch?v=uuS5ZyQhvsk) in the open graph debugger you can see that they are now providing open graph meta data for their html player as well as the flash one.
I also have a player that sits in an iframe, and am now including the same tags that youtube is, minus the flash ones as we don't have a flash player, but it isn't working and facebook is giving me this error which doesn't make sense:
Share has playable media but will not play inline because it would cause a mixed content warning if embedded. Add a secure_src or make the video src secure to fix this.
This is the information facebook is reading:
This is the url as an example that is generating that error: https://www.la1tv.co.uk/player/124/260
All I can think is that Facebook has made some kind of deal with youtube and this isn't available for everyone yet, but that isn't clear from that error.
All of the content on our site is served over https.
Anyone know what's going on or got this working?
I can't find any documentation anywhere on facebook how to do this.
I posted a similar question a while back when I was trying to get this working but at this time youtube was still only providing the flash player to facebook.
It looks like someone else was having a similar issue here.
According to WizKid this is currently in a trial period for YouTube and hopefully will be rolled out to everyone at a future date.
I have built a web site for our student tv station and the concept is pretty similar to youtube. We would like for our videos to be playable directly in facebook when shared, with the videos themselves still hosted on our server and our stats being updated.
The player on the site uses videojs and is all working with the html5 video tag. There is also an embeddable version of the player that can run in an iframe. Ideally I'd like this to be used on facebook but don't think it's possible. This is what I've attempted at the moment with the og:video:type value set to text/html and og:video set to the embeddable player url and it doesn't appear to work. Here is an example page, and here is the embeddable player for it.
The only other ways I've seen is to specify a url to the video file, or a url to a flash player.
All of our videos are rendered at different qualities/resolutions and on our site and embeddable player there is a quality selection bar that changes the video url in the player. However it looks like with opengraph and facebook there is no way of giving it the urls to the different qualities or having the user pick the one they want on facebook, meaning we're stuck with forcing everyone to watch at one of the qualities. Is this right?
So then the only other option that appears to be available is building a custom flash player which has quality selection built into it. From what I can tell this is what youtube is doing. Is this the only option though because I don't want to build a custom flash player for Facebook to then decide in a few months that they're not supporting flash anymore?
I realise similar questions have been asked already but I couldn't find a definite answer and some of them were over a year old.
Thanks.
Facebook is currently trialing iframes with YouTube. Hopefully the support will be rolled out to everyone soon.
More info at this question: Embedding video player html5 iframe in facebook share like YouTube