I'm currently trying to embed using an iframe. The site I'm embedding (embed.embed.embed.com/) doesn't have a protocol (http or https) I'm not sure why this is but it doesnt operate if a protocol is established.
My website is https://www.example.com
<iframe src="//embed.embed.embed.com/"></iframe>
This would return https://embed.embed.embed.com/ (which doesn't work - returns a 404).
<iframe src="embed.embed.embed.com/"></iframe>
This would return https://www.example.com/embed.embed.embed.com/
What can I prefix the src with in order to direct it to a root domain, without assuming a protocol? Is there even a way of doing this? If not with an iframe what other methods might be recommended?
do you want like this,
<base href="http://example.com">
<iframe src="example.com"> </iframe>
Related
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.
I want to embed a YouTube video link in my web page with something like url://youtu.be. It's not appearing when I embed that in my web page. The below code, however, is working well (url://youtube without the dot).
<iframe width="420" height="315" src="https://www.youtube.com/embed/4pXUcxWLA7g" frameborder="0" allowfullscreen></iframe>
Why does using a "youtu.be" link not embed properly?
Because youtu.be is a URL shortening service. So when you go to a you.be URL, all it does is Redirect you to the full URL for a video.
Edit, actually that's not the complete end of the story. What happens when you do that is yes, it redirects you, but then the browser gives an error:
"Refused to display (video url) in a frame because it set
'X-Frame-Options' to 'SAMEORIGIN'."
So, this could work with redirection, but it doesn't because youtube sends down this response
header: x-frame-options:SAMEORIGIN
And so the browser refuses to display it because it's not the same origin (that is, it's not being served from the same domain). Why does youtube do this? That I don't know. But, basically, it appears you MUST you the youtube.com/embed style URL for iframe. If you have URLs in the youtu.be format (maybe in your database or something), then you will need to hit the youtu.be link and then see where it wants to redirect you to, and then use THAT link for your iframe.
My website has some embedded Youtube videos where the embed URL uses http and the webpage is also served through http. Some of my users (i.e. using Google Chrome on Windows) have told me that the video isn't playing. However, after changing the embedded URL to serve through https, it seems to play fine (at least on Chrome). Before I change all of the embedded urls to https, my question is whether there's ever an issue serving an embedded video through https if the webpage that it's embedded in is served through http (I know that there can be "mixed content" issues if an embedded video is http while the webpage is served through https).
The code I am using:
<iframe align="middle" frameborder="1" height="500" scrolling="yes" src="youtube.com/embed/video_id"; width="800"></iframe>
Thanks!
The issue would be the same as with any HTTPS resource - if the certificate can't be validated for whatever reason, the embedded resource won't be shown or the user will get a warning (depending on the browser implementation).
I have tried every method that I've read about to embed a youtube video into my HTML5, but it will not work in any browser. The best I get is a square that says the website cannot be found. I've tried using the old embed code, I've tried using the iframe...I've also tried using the new video tag...I've dumped each one of the codes into their own separate part (meaning not contained in a div or anything like that)...The only thing that it is contained in is the body itself...I've also tried the opposite by putting all three of these methods in some sort of container like a div. Not that being in one or not being in one should affect it's playability, but I'm trying everything...I don't understand why it just won't work
You aren't showing what you tried that didn't work, but I'm feeling psychic today so here's a wild stab:
YouTube is currently giving out embed links that look like this:
<iframe width="640" height="360"
src="//www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe>
What's unusual about this is that the URL -- in the "src" attribute of the IFrame tag -- does not specify a protocol.
The format of the src attribute above is a type of relative URL, called a protocol-relative URL, that allows the embed tag to work regardless of whether your page is being accessed with an http:// or https:// protocol. (You aren't allowed to mix these in a single page)
However -- and I'm guessing this is where you're going wrong -- if you open an HTML5 file locally, and not through a web server, it has a file:// URL. Because relative URLs -- including this oddball protocol-relative URL -- always take their unspecified bits from the current page location, the full URL that is being calculated is invalid:
file://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage
To fix, just change the src attribute to specify the protocol, changing the relative URL into an absolute URL that works from a page served with both file:// and http:// protocols.
<iframe width="640" height="360"
src="http://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe>
The drawback is that you can't put this on a page being delivered over https.
In the longer term you should get in the habit of testing from a real web server instead of a file URL. For a locally-installed test server, WAMP/MAMP is an easy and popular choice.
So I have this code:
<iframe id="theFrame" src="http://localhost" style="width:100%;" frameborder="0">
</iframe>
and the localhost site loaded in the iframe just fine..
but then when I change the src to an external website
<iframe id="theFrame" src="http://www.youtube.com" style="width:100%;" frameborder="0">
</iframe>
The website did not load.
What did I do wrong? I know that you can use external websites in an iframe since Google Image Search does so...
How can I get external sites to work in my iframe?
The reason why external websites such as:
youtube.com
google.com
stackoverflow.com
etc.
are not loading in your frame, is because they are intentionally leveraging some sort of Frame Killer.
Example (uses jQuery):
<style> html{display:none;} </style>
<script type="text/javascript">
$(document).ready(function () {
if(window.self == window.top) {
document.documentElement.style.display = 'block'; }
else {
window.top.location = window.self.location; }
});
</script>
Suggested reading:
Framekiller (Wikipedia)
Busting a tough FRAME killer
If you run the code snippet below:
<iframe src="https://www.youtube.com"></iframe>
Then look at dev tools, it will throw the error:
Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
This is because the site you are trying to access limits embedding (via iframe, frame, embed, object) to the same origin using the X-Frame-Options header. So youtube.com can load iframes with youtube.com pages just fine, but nobody else can. Only site admins for the embedded site can change that setting.
If you have admin for the site you are embedding, you can whitelist the the host site:
X-Frame-Options: allow-from https://my-host-site.com/
This has to be sent as a HTTP Header by the server of the page you are trying to embed. It will not work as a meta tag inside the HTML head. This is how the browser knows the site you are embedding ok'd the site that is hosting to show the page in the iframe.
You are probably experiencing the same issues I am having, Most likely the iframe is being blocked by the X-frame-options or being blocked by the Deny property. For example if you access facebook from an outside source it will come back with a DENY response in google chrome
It appears to be a youtube-only problem; src="http://www.mozilla.org" works for me in your code. If you want to display youtube videos in iframes, they'll probably want you to use "embed" option on the video page?