I've created a "new tab, chrome extension" a while back which is running a React App. One of the feature of this extension is a Twitch player, with the possibility of opening streams using an iFrame to watch the streams. The data and urls are retrived from the open Twitch API. This has worked fine for quite a while, but about a month back it stopped working for some reason.
When I open a stream I get this error message:
Refused to frame 'https://embed.twitch.tv/' because an ancestor
violates the following Content Security Policy directive:
"frame-ancestors https://".
It could be worth noting as well that the player works when I'm just running the React App, so it has something to do with the Chrome Extension.
I did some research about this issue and found that it was some issue with how the parent and referer is specified in the iFrame.
The iFrame look like this and most of it is automatically generated when I build and run the extension.
<iframe src="https://embed.twitch.tv?autoplay=true&channel=<a channel>&height=720px&layout=video-with-chat&muted=false&parent=<id of my chrome extension>&referrer=chrome-extension%3A%2F%<id of my chrome extension>%2Fbuild%2Findex.html&style=%5Bobject%20Object%5D&targetId=twitch-embed&width=1280px" allowfullscreen="" scrolling="no" frameborder="0" allow="autoplay; fullscreen" title="Twitch" sandbox="allow-modals allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" width="1280px" height="720px"></iframe>
Since I coudn't find anything that helps solve the issue, I figured I try with a new post. Could anyone help me solving the issue?
I asked the same question on the twitch developer forum, and got the answer that this is not supported anymore.
source: https://discuss.dev.twitch.tv/t/twitch-embedded-in-a-chrome-extension/33157
So for anyone coming to this question, this is not possible anymore.
Related
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.
I am trying to use embed youtube code in HTML but when I press play button it say "This video is unavailable". I am using the following HTML code for it:
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfJYHfrOGgQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Can anyone help me out with this? I have tried other embed youtube videos too, still says same thing. I am using Chrome.
I had the same issue recently and it had nothing to do with video owners embedding settings. Apparently YouTube forbids embedding some videos in a localhost environment without a public domain, but your video can be embedded with no issue whatsoever through a public domain/subdomain: Replace the src value in the JSFiddle from #PStarczewski's answer with your video link and it will work properly.
For me this was caused by a referrer policy "no-referrer" on my site. Youtube seems to block embedding when no-referrer is set.
Hope to save someone from wasting time with this crap.
TL;DR
Youtube allows only https pages to stream with embeds/iframes.
Make sure that embeds are allowed by the video owner.
Set a less restrictive referrer policy such as "no-referrer-when-downgrade" in order to allow youtube to know the origin of the request. In django you can do this by adding following line in settings.py
SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"
Long read:
If you are facing this in django application recently, it could because of the recent change in referrer policy in django 3. Read more here
When you add an iframe for a youtube video (given that the video owner allows embeds), the referrer (the host origin where the video is being played) is sent to youtube, by the scripts inside the iframe (the embed url gets a new page which brings all the required scripts). If the server is setting a referrer policy which prevents the communication about the referrer, youtube rejects the play request and responds with 204 - no content.
Starting from django v3.x, the referrer policy is set to "same-origin" by default which is too restrictive to let youtube know about the origin. In this case, youtube does not allow the video playback and responds with code 204.
This can be resolved by setting a less restrictive referrer policy. You can use "no-referrer-when-downgrade".
In django, you can set this with the following variable in settings.py file.
SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"
The above policy states that referrer will be sent as empty when the access protocol is downgraded, else the origin will be sent as referrer (which is acceptable). Given that, youtube only allows https origins, for this case it means that if the iframe is embedded in a webpage with https, the referrer will be sent properly and should not cause issues while playing youtube videos through such embeds.
On YouTube there is so called "embed settings" where owner of the video can decide whether or not to allow for it.
Here is an example:
JSFiddle
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLsyvDWwjkTqtOmqAiTzzfHspTAztB-udL" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JfJYHfrOGgQ" frameborder="0" gesture="media" allow="autoplay; encrypted-media" allowfullscreen></iframe>
And here you can find more details about this: YouTube Restrict embedding
The problem I had was that my YouTube video was stuck loading when I embedded it. But if I logged out from my YouTube account, then it started to work. I hope this is a temporary bug YouTube will fix soon.
In my case the video was playing fine on my localhost but was showing unavailable when played from the remote server. Turns out it was happening because of this HTTP header: Referrer-Policy: no-referrer.
Removing Referrer-Policy: no-referrer HTTP header solved the problem for me.
Almost took me 15 minutes to solve it!
Problem:
I have a html file which calls another html file through an iframe with sandbox. The inner file contains iframe given by soundcloud to embed. Now this soundcloud widget does not work.
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width= "100%" height="450" src= "inneriframe.html" sandbox></iframe>
</body>
</html>
And the inneriframe.html contains iframe I got from soundcloud.com inneriframe.html is:
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/36700916&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" ></iframe>
</body>
</html>
Observations:
1. It works for some files and does not work for others.
2. It works on firefox and not on chrome.
3. If we disable flash player from chrome plugins, it works.
Possible reasons:
Perhaps for some files soundcloud first check if flash player is available, run it through flash player else through HTML5. In such cases it finds that flash player is available and hence tries through it but sandbox restricts flash player and hence it does not work.
For other files perhaps soundcloud directly runs through HTML5. Also since chrome implements sandbox most strictly, hence it is a problem in chrome only.
Working embedding:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/211417319&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Non-working embedding:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/216846955&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
Kindly help me in:
1. resolving issue, if there is some way.
2. to differentiate files which works and which does not work and why?
Regarding the Chrome/Flash issue, I think what may be happening is you may have some conflicting Flash updates in Chrome. Chrome by default has Flash integrated and each update to Chrome also adds the most recent version of Flash. If you've installed Flash separately, it could also be installed for Chrome, so the two versions might be in conflict with each other. You need to disable one/ the second instance of Flash - that's why disabling the plugin in Chrome works. I would recommend however, that you ensure that your version of Chrome is up to date and/or that you update your flash plugin by doing the following:
In the address bar [of Chrome] type chrome://components, then under "pepper_flash," click 'Check for update'. That may work. So it is not a general issue, it will vary from machine to machine. A pain, i know.
Regarding the some-play some-don't issue, this is a known FF-soundcloud issue. Apparently if you enter Firefox 'Safe mode' all the tracks will play. (you can enter Safe mode by clicking the menu icon, then help and select Restart with Add-ons Disabled then select Start in Safe Mode (don't Refresh Firefox) ).
Hope this helps!
Rachel
I have a problem where I am building some html pages on my local machine and I am trying to embed a youtube video into a page using the provided code:
<iframe width="560" height="315" src="//www.youtube.com/embed/oBjWLXLroWc" frameborder="0" allowfullscreen></iframe>
However when I test the page locally I get file not found C:\desktop\testsite\http://www.youtube.com...., etc
Anyone know why this is happening, I don't believe I have encountered this before.
Browsers used are latest FF and latest Chrome, both show file not found. Have checked all code and nothing seems wrong, I can show local content (same directory) in the iframe no problem. Also tested with other external sites/resources and same issue.
Thanks
Add an http: to the start of your src:
<iframe width="560" height="315" src="http://www.youtube.com/embed/oBjWLXLroWc" frameborder="0" allowfullscreen></iframe>
I assume you are accessing the file via "file://C:/desktop/testsite/index.htm" or something similar?
"...src="//www.youtube."... uses the protocol/scheme in the address/location bar which in this case is "file://...." which would give you the result you are experiencing.
To fix this you need to install some web server software WAMP or IIS depending on if you wish to do server side coding at some point.
PHP - WAMP - http://www.wampserver.com/en/
ASP.NET IIS - http://www.iis.net/
Good luck!
This is probably happening because you are developing locally. Try using WAMP or XAMP to develop. Or upload your changes to your domain and test again. As heems mentioned, you can adjust your code to use the absolute path by including the http:// to your url. Using just // takes you to the base or root of your path. Because the base of your html document is your C: drive, it goes to that to find/build the URL.
This page may help explain it better than I can. - http://en.wikipedia.org/wiki/File_URI_scheme
I'm trying to get Iframes to work. I'm running safari, so it is compatible, but when I test it, it comes up blank.
Code:
<iframe src="http://www.google.com" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
I took the code directly from the w3schools website after using the "try it out" editor so I know it's supposed to work. When I changed the page from a page in their subdirectory to an external page, it shows up blank.
The syntax is correct. It's not your fault - Google is blocking iframing using the X-Frame-Options header that newer browsers listen to.
Possible workarounds are explained in this Google forum post.
Follow the instruction in the following Google Developer Site under "IFrame embeds using the IFrame Player API" bullet:
https://developers.google.com/youtube/player_parameters
This uses API's JavaScript code to view youtube videos.
Here's the link with a more general instruction
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player