I am trying to embed twitch clips and videos on a site and it feels like I'm hitting my head against a wall here.
I have an articles division holding an embedded twitch clip. On both my ftp site and localhost, the embedded clip doesn't work.
I can only assume I am doing something wrong with my parent but I have tried almost everything.
I get this twitch connect error - I have followed the twitch API but not coming right.
Not sure if it makes a difference but the html file is located in the directory - abcstreamer.co.za/commingsoon/streamclips.html
This is my local hosted code:
<article class="stream stream-1 has-post-thumbnail">
<iframe
src="https://clips.twitch.tv/embed?clip=EphemeralPlainSaladPipeHype-24G9rCNWcx09Wc42&parent=localhost:5500"
allowfullscreen="true",
autoplay=false,
height="100%"
width="100%">
</iframe>
</article>
Below is my ftp site code:
<iframe
src="https://clips.twitch.tv/embed?clip=EphemeralPlainSaladPipeHype-24G9rCNWcx09Wc42&parent=abcstreamer.co.za"
allowfullscreen="true"
autoplay="false",
height="100%"
width="100%">
</iframe>
Could someone who has maybe worked with the twitch API call assist in correcting a mistake I cant seem to see.
abcstreamer.co.za doesn't exist so I can't debug for you
Twitch Embeds require the site to be over SSL.
And you may need multiple parent if your embed is in an iframe on your site. Site builder Tools such as wix will put the embed in and iframe on the site so you need two or more parent's declared.
So you might need
https://clips.twitch.tv/embed?clip=EphemeralPlainSaladPipeHype-24G9rCNWcx09Wc42&parent=abcstreamer.co.za&parent=www.abcstreamer.co.za
To account for www. if you don't redirect www. to non www. or vice versa. The same applies for redirecting non SSL users to the SSL version
or
https://clips.twitch.tv/embed?clip=EphemeralPlainSaladPipeHype-24G9rCNWcx09Wc42&parent=abcstreamer.co.za&parent=www.abcstreamer.co.za&parent=someotherdomain.com
If someotherdomain.com handles the iframe on the site builder if any
The "mega thread" has further advice on determining your parent stack https://discuss.dev.twitch.tv/t/the-great-big-im-using-wix-somewebsitemaking-tool-and-i-dont-know-how-to-fix-my-embed-thread/26297/
I'd like to use JavaScript to enable PiP on Youtube videos. I am able to do so on html <video>s but it seems impossible to do so on Youtube <iframe>s. Has someone any lead on this?
Users may be able to right click twice (to bring up the html5 menu) and select Picture in Picture, but it seems to be impossible to trigger it programmatically from outside the iframe due to the same origin policy for iframes. I don't imagine that the &origin= parameter in the iframe URL actually changes the headers sent from youtube, it didn't seem to work in my testing.
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
The youtube iframe api gets around this by using postMessage, however there are no messages implemented at the moment to execute video.requestPictureInPicture(). There seems to be a togglePictureInPicture function defined inside the player base.js script but this doesn't seem to be exposed through the message passing API
I always use the next line in the console, on the youtube page:
document.getElementsByTagName('video');
This will show a HTML Collection, open it and right click on the first position of the collection, store it as global variable, this will generate something like temp1. Then you have to write the next line:
temp1.requestPictureInPicture();
And that's it.
You cannot enable PiP programatically using Youtube's iframe embed. The only option is to get the URL directly to Google's streaming servers or stream the video data yourself. Either way you need a stream URL to set as the src for a video element, then call video.requestPictureInPicture() on the video.
https://r4---sn-4g5ednls.googlevideo.com/videoplayback?expire=1627319351&ei=15...
Thats what a stream URL for a video hosted by google looks like. A guy name Levi wrote a library to retrieve this URL for a given Youtube video. But the library makes request to his proxy server yt2html.com in order to retrieve this URL.
I go in more detail on the issues with YT PiP in this blog post.
Here is a test case from the developers: https://beaufortfrancois.github.io/sandbox/media/iframe-video.html with PiP
There are lots of examples in the documentation:
Read more about that topic: https://developers.google.com/youtube/iframe_api_referenceand about PiP-Api: Picture-in-Picture Web API Spec: https://wicg.github.io/picture-in-picture , https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi=21f55e7bf6fa
Please help me!
I've installed SSL certificate on my server and now can't access on "mixed contents" anymore. My actual problem is an iFrame widget which is HTTP only:
<iframe src="http://www.exchangerates.org.uk/widget/ER-LRTICKER.php?w=435&s=1&mc=USD&mbg=FFFFFF&bs=no&bc=000044&f=verdana&fs=10px&fc=555555&lc=597384&lhc=FF8201&vc=FF8201&vcu=008000&vcd=FF0000&" width="435" height="30" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>
The result is that I get the content blocked (blank on page) on both Firefox and IE.
Is there any workaround? But please just don't tell me to change browser settings since my users are not going to do so.
Thanks in advance for your attention!
The easiest solution (for you) is to have the 3rd party supply a SSL/TLS URL.
If that however is not possible you are out of luck (with only frontend languages as tagged on your question).
If you are also running a backend language though you could proxy the iframe URL and provide the proxied URL in your iframe e.g. https://yourdomain.com/exchangerates which retrieves the page (including the resources used).
Another option would be to see whether the site has an API so you can download the data you need so that you can display the data on a page you control yourself.
I am using Simple Facebook Connect for Worpress.
However I am getting some javascript errors.
View Image Full Size
www.connect.facebook.com/widgets/fan.php?api_key=xxxx&channel_url=http%3A%2F%2Fjquery.webspirited.com%2F%3Fxd_receiver%3D1&id=189373481094312&name=&width=285&connections=10&stream=0&logobar=1&css=
GET (same url as above) undefined (undefined) Unsafe
JavaScript attempt to access frame with URL http://jquery.webspirited.com/ from frame with URL
http://www.facebook.com/extern/login_status.php?api_key=xxxx&extern=2&channel=http%3A%2F%2Fjquery.webspirited.com%2F%3Fxd_receiver%3D1&locale=en_US.
Domains, protocols and ports must
match.
How can I fix these errors?
Short answer: You can't. This error happens in Safari and sometimes Chrome. The webkit based browsers have a somewhat tighter security model for cross domain same-origin policies. The way Facebook Connect works is that it tries one method to make things work, then if that fails, it falls back to another approach.
The fall back means that the code still works, but the error comes up because they try that method first.
This is how Facebook's code works. You can't fix it. You can't work around it. If you're going to use Facebook's code, then you learn to live with it.
last time, when i got an error like this, i forgot to set up the url in my facebook-application.
http://www.facebook.com/developers/ > Application settings > Web Site > Site URL, Site Domain
The api-key is alway linked with your url. The url of the website, where u implement the iframe must have the same URL like this.
You might like my Simple Facebook Comments For Wordpress wordpress plugin I recently released. It makes the whole process of adding facebook connect comments to your wordpress site super easy and fast.
http://www.davidswordpressplugins.com/simple-facebook-comments-for-wordpress/
I have a page that is viewed secured with 'https' in the URL, that also contains youtube urls to play video from youtube. Since the youtube URL contains 'http' with no 's' IE is giving an a warning dialog of "This page contains both secure and non-secure Items."
Is there a way I can workaround this in Javascript? Maybe after the page loads generate the youtube player HTML with a function? The url will still have to begin with 'http://'
EDIT: Thanks everyone for the input so far! I know this sounds impossible. I'd be happy if there was some conditional comment or something so I can tell IE to suppress this dialog box. It confuses our customer since most of the world is in IE, FF has much better behavior in that it tells you if you click the broken lock, but not an annoying popoup. This is like a new version of "your program has performed an illegal operation." (user hides from police) I am embedding youtube video onto the page where the src is from youtube. I am using their player, as it is hosted by them. No way out of this that I see.
I guess my fix is to only apply HTTPS to the very sensitive pages (password change, login) and come out of it in all others so youtube videos don't give this popup. I am in PHP and am worried the SESSION will get clobbered if I do this but I guess it is the only way around and will wait to tackle that bear monday.
One thing I've done to work around this problem is to create a page on my SSL site that proxies in the 3rd party resource. That way the client only sees SSL URLs.
For example, you flash player could point to the URL "https://YourSite.com/proxy.aspx?URL=http://www.youtube.com/video.swf". When "proxy.aspx" is called, it would make a new web request to the URL in the query string and return the data to the client.
If you do this you need to validate the proxied URL or use some kind ID so that the URL can not be changed since you are convincing the browser that this content is trusted.
I've worked around this problem on all browsers using the following:
1) Create a thumbnail image of the start of the video with the "Play image" tag on the snapshot and host the image on your own https server. Embed the thumbnail where you want the video to be.
2) When the user clicks on the image invoke a Javascript onclick handler to create a new window with the href of the http embedded youtube video.
function onImgClickHandler() {
//Link to embedded Viddler or Youtube video
var win = window.open("http://www.viddler.com/player/###/", "My Video",
'height=500,width=800,resizable=yes,scrollbars=yes');
win.focus();
}
3) The video will now appear in a popup of the main page.
I usually use videos as tutorials for my site, so having the video in a popup browser window works well because it can be viewed alongside the main content and lets the user follow along with the site. The browsers do not even give a redirect warning that you are invoking an http popup from an https site, so your users will not see any "scary" non-secure item warnings on any browsers.
Hope this helps, I have an example of the above on the landing page of my site: https://drchrono.com/
UPDATE: I made the image preview by taking a screenshot of the playing video.
According to this quite recent YouTube API blog post, embedded YouTube videos already support access via HTTPS. If this is the case, (and I haven't tested it, but equally I have no reason to not believe them), then you should just be able to stick the "s" into your embed URL and it will work just fine.
If there was a way around it would be a security flaw in IE and Microsoft would patch it, so I don't think you're going to get away with mixed content and no warning.
The only alternative is to host the FLVs yourself. There are a number of good SWF based FLV players available.
Having insecure links on a secure web page is an issue that has little workaround. One option is to exclude specific content on your page when a user connects via https. In this way a non-secure page load would display the content and a secure page load would not display the content:
<% if (!Request.IsSecureConnection){ %>
<div>You can't see this if the page is secure<div>
<%} %>
I have used this method with much success... Hope this helps.
I have had this same problem and found a solution.
It works without having to turn of SSL certification.
Step by step guide to fix Google chrome
You can view the fixed page listed below. It has links to YouTube,Flickr and many other websites. It is secure and has been for a few months now. Hope it helps you too.
The mod_rewrite module of the Apache httpd server can be used to embed YouTube videos on SSL secure pages without any errors, as detailed on Adam Mershon's blog.
It involves setting up a rewrite rule to redirect a path within the SSL domain to non-SSL YouTube:
.htaccess
RewriteEngine on
RewriteBase /
RewriteRule ^youtube/(.*)$ http://www.youtube.com/$1 [L]
So that inside your HTML you can embed YouTube link URLs appearing to be from your own domain, such as:
<embed src="https://www.yourdomain.com/youtube/v/mydjFYoD4WS&hl=en_US&fs=1&rel=0&autoplay=1&"
type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="560"
height="340">
</embed>
Using Javascript to replace the URL does not work. IE7 intercepts the content, and thereafter, the warning.
I tried using (jQuery) $(function() { }); it sortof works. You can click yes/no to the dialog, the content will load nonetheless.
This is a severe problem in my world. It earns my work comments from users like "It's not user-friendly", "It's broken" or "It killed my kitten".
The proxy solution probably is the only pseudo-fix that's gonna roll. Just that it's clearly not a perfect solution either.
I try to navigate this a bit better by running as much of my sites on https as I can. Obviously the youtube case isn't fixed by that.
IE, what a silly hunk of FUD-pushing abominationware. I hope IE9 really is as vastly better as it seems. Just, not supporting XP means, well, it's sort of like it was never released. As the n00biest of users, will unwittingly write-protect the status quo until the XP-powered Chineese Skynet of 2247 finally feeds us the red pill...
Your problem occurs become the main page is grabbed using Https whilst one or more included files ( images, javascript, css etc ) is fetched using http. Fix the http url to be https.