I've read a couple of documents (google searches) in working around Picture-in-Picture (PiP). It really says it is available only for video elements. (See reference: https://w3c.github.io/picture-in-picture)
Also looked into the code of PiP extension created by chrome
You can see from the code here that it finds the "largest" video element.
My question is, how did they make it work in YouTube embedded videos? It is inside an iframe, right?
I tried this approach in order to get the video inside the iframe. It will not work because of cross origin policy and it is clear that this is not the approach they used in the extension.
Someone know what's behind all this or someone else experiencing the same?
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'm working on my own DRM solution for video content. I'm verifying each access to the actual video file. So video.mp4 is actually video.php which then streams orig_vid.mp4 into a <video> element.
It works fine and all – except on mobile! Mobile seems to access the video file two times, making the second request unverifiable.
Before the video is played (autoplay not possible on mobile) it accesses the file once, probably to get headers, etc. Then another request is coming throug, once we hit the play button (as expected), but after that, there's another request, and I can't figure out why or how to validate this request.
If at least I know the pattern behind the requests, I could build my script so it accommodates those. But to me right now the 2 requests seem random...
Any idea or explanation why that is or what's going on?
Are there Cache-Control, Date and Expires headers properly set?
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.