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).
Related
I have assembled a website and configured a Digital Ocean droplet to serve an audio stream using Azuracast.
At this URL http://137.184.153.182:8010/radio.mp3 lives the live audio stream. At the time of posting I am streaming static from Audio Hijack, which you can hear by visiting the URL and clicking play on the audio element. By inspecting the site I see the following HTML
<video controls="" autoplay="" name="media"> <source src="http://137.184.153.182:8010/radio.mp3" type="audio/mpeg"></video>
On the site meant to deliver the audio stream to listeners https://feverdream.radio, I have placed an identical HTML snippet. However the play button remains grayed out and I am unable to play the audio live stream.
I do not understand what I could be doing wrong so that the same code is functional on one URL but not another.
an insecure HTTP resource is being loaded for an HTTPs website. Open the browser console to see the error below:
Mixed Content: The page at 'https://feverdream.radio/' was loaded over HTTPS, but requested an insecure element 'http://137.184.153.182:8010/radio.mp3'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html
The SSL/TLS certificate authority for 137.184.153.182 should be either:
Publicly issued - see Let's Encrypt
Privately trusted - see how to trust a self signed certificate for your non-public development environment.
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.
Is it possible to play a video via the HTML5 video tag using HTTPS as the video source? Our page is entirely in HTTPS, however when you browse we are getting the mixed http/https mode message. The video configured to use HTTPS as the source is changing to HTTP somehow. We don't see any 302 redirects coming from the web server. Is this browser dependent? We've tried all possible browsers. Code snipplet below from the developer tool output.
<video id="homepageCenterVideo_html5_api" class="vjs-tech" preload="auto" data-setup="{}" poster="/CMSImages/static_image.jpg" src="https://www.domain.com/Video/Makes_It_Easy.mp4" controls="">
<source src="https://www.domain.com/Video/Makes_It_Easy.mp4" type="video/mp4">
</video>
If you were to copy that URI and paste it into the URL bar, you can see that it changes from https to http and we still don't see any 302 redirects coming from the server.
We got the HTML5 video to work using HTTPS, however we still don't know why. The back-end server is IIS. The directory housing the video file is named "video". If we change the name of that directory, or put the video file in another directory it's able to stream using HTTPS just fine. If we rename the directory back to "video" it won't work and uses HTTP. Very weird, but we're assuming it has something to do with IIS settings somewhere.
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.
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?