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
Related
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.
I'm trying to embed vimeo videos as iframes. I'm using the following code:
<iframe width="1140" height="570" src="https://player.vimeo.com/video/553469759?autoplay=1&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
It works fine when I paste it in a codepen or try it in firefox. It doesn't work in chrome for me though. When I inspect the iframe's HTML, I can see that vimeo adds a class no-fullscreen-support, it also added these classes though:
js-player-fullscreen
with-fullscreen
Figured it out on my end. It was due to the Permissions-Policy being set by Nginx in the header. In my instance of Nginx, it was originally set to this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
The culprit in this case was fullscreen=(self) -- it was telling Chrome that unless the code originated from the site, it shouldn't allow full screen. As Vimeo's iframe is being loaded from player.vimeo.com, Chrome saw that as a third party and wouldn't allow it. Removing that from the Permissions-Policy so it looked like this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),payment=()";
Resolved the problem. The button is showing fine now.
For those using Apache, it'd probably look like this:
Header always set Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()"
The same principle applies, just remove fullscreen=(self).
You might also see it mentioned as Feature Policy, same thing, it's just called Permissions Policy now.
You can learn more about Permissions Policy here: https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md
From Vimeo Help Center:
The fullscreen button will be hidden from the player in scenarios where fullscreen mode cannot be activated. Here are some common causes:
First and foremost, check the Embed tab. Make sure the fullscreen button is toggled on under the Controls section
The iframe embed code is missing the fullscreen attributes: "mozallowfullscreen,""webkitallowfullscreen," and "allowfullscreen." If you’re pasting your embed code into another application, make sure these values are being retained.
The player iframe is contained within another iframe that is missing the fullscreen attributes. Browsers do not allow iframes to enter fullscreen if they are contained within other iframes without these fullscreen attributes. - Try inserting the player outside of the container iframe or adding "mozallowfullscreen," "webkitallowfullscreen," and "allowfullscreen" to the container iframe.
The iframe is contained within a frame. Frame elements cannot enter fullscreen, and neither can any iframes inside of them. We recommend removing all frame tags from your page’s source code.
If you're not sure if the above cases apply, please contact us, and we’ll investigate further. Be sure to include a link to the page where the video is embedded, so we can take a closer look at your page's source code.
You should add these tags to the element:
webkitallowfullscreen mozallowfullscreen allowfullscreen
what if you just download the video and upload it somewhere like github?
And then use the tag to embed the video?
<video src="protocol://someurl.domain/path" muted autoplay width="1140" height="570"></video>
If vimeo doesn't allow downloading you can always use third-party tools like savethevideo.com
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'm trying to embed photospheres into Squarespace.
Google Maps works fine, but doesn't suit my needs and looks as follows:
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1471028758208!6m8!1m7!1sF%3A-hjcchX5MD5g%2FV03OAcggYUI%2FAAAAAAAAKeM%2FXwIrucnK4IQkwWbhxu9BrvOATMYZaMmKgCLIB!2m2!1d37.870246!2d-119.360704!3f125.91384035181916!4f6.045852307800146!5f0.7820865974627469" width="100%" height="800" frameborder="0" style="border:0" allowfullscreen></iframe>
Instead, I want to embed via sphereshere.net Their embed looks as follows but DOESN'T work.
<iframe src="http://sphereshare.net/#!/e/c467ba7af9753ee287cd44550493e966" height="320" width="620" frameborder="0"></iframe>
What do we think is the problem?
Usually, in cases like this, the problem is the use of the http protocol in an iframe while you're still logged into Squarespace via https. You should try to view the page while not logged in, being sure you're viewing the page via http and not https. If you provide a link to the page, I'm happy to take a look as well.
The reason for this has to do with browser security. Loading a resource over http while viewing the parent website over https is a potential security risk, so browsers do not allow it. Google maps supports loading over https (and you can see the link you're using for Google Maps uses https). Whereas sphereshare.net does not support https, so you're using http. When logged into Squarepace, you're loading the website over https but the sphereshare iframe over http, so browsers do not allow it.
In the future, hopefully you'll be able to use https with sphereshare, then it would work in either case. Until then, you'll have to log out and set your protocol to http in order to view iframes loaded over http.
This is my current website: http://acrossuhubsubmissions.tumblr.com/ .
As you see, I'm using iFrames to embed part of the Dropbox onto my tumblr website. The Dropbox page is a public sharing page. The html code that I'm using to display the Dropbox:
<left>
<iframe src ="https://www.dropbox.com/sh/d9ulw65twvxrrhi/AACHsXLlXUSan4Zx4hGC8BDja?lst" width="777px" height="777px" scrolling="yes" >
<p>Your browser does not support iframes.</p>
</iframe></left>
I used the exact same code for the Google speadsheet webpage, and that seemed to show up. Does anyone know why the Dropbox webpage isn't showing up on my tumblr page?
I was able to embed a Dropbox video like this;
First, create a share link to the video, then modify the link by changing the ?dl=0 at the end to ?raw=1 and then using this code...
<iframe width="800" height="450"
src="https://www.dropbox.com/s/nwg6px2i8si18w9/Oh%20Deer%21.mp4?raw=1
&autoplay=1" frameborder="0" allowfullscreen></iframe>
NOT recommended for high bandwidth uses, as you might be banned from Dropbox (read this https://www.dropbox.com/help/security/banned-links.)
It is not possible to display that dropbox link in an iFrame not originating from outside the dropbox.com domain. The reason why is because they include the following header in their response:
X-Frame-Options SAMEORIGIN
see https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options for more information on this header. Browser supporting this flag will not load the content in an iframe.
See the documentation on dropbox how to user their api to embed content:
https://www.dropbox.com/developers/dropins
Better use OneDrive, it gives you embed link. [I know it's an old question but it might be helpful if you didn't knew it already]
You can use the "public link".
Copy the file into the dropbox public folder and now you can use the public link to embed in a frame.