Hello,
Your iframe videos stopped working after updating our blogs to Wordpress 4.7!
Could you pls check your codes or update it and make it work for blogs running on WP 4.7?
This is the error that I found in Chrome console:
“Uncaught DOMException: Blocked a frame with origin “http://domain2.com” from accessing a cross-origin frame."
Thank you!
Hello,
Can you please provide a URL to a post where you have an embedded player? I’ll be glad to take a look.
Here are some examples:
http://scooblrinc.com/female-tech-mogul-thinks-women-will-find-success-silicon-valley/
http://scooblrinc.com/know-right-time-start-business/
http://scooblrinc.com/hinges-founder-decided-gut-company-start-scratch/
Thank you @zenithregulus, I see the issue.
Can you please provide the exact embed code the Kaltura plugin generated for you?
After looking into it a bit more, the offending code causing:
“Uncaught SecurityError: Blocked a frame with origin “http://cdnapi.kaltura.com” from accessing a frame with origin “http://scooblrinc.com”. Protocols, domains, and ports must match.” is here:
http://www.inc.com/js/kaltura/moreViewOptions.js
What is this file? it is not part of our code base…
Here you can find an explanation as to why this is being blocked:
This is one of the embedded codes:
(how do I add the code?)
This one is extracted from http://www.inc.com/weili-dai/why-this-female-tech-mogul-thinks-women-will-find-success-in-silicon-valley.html and used to work normally on former Wordpress version 4.6.1.
It stopped working after updating wordpress to 4.7. We thought it was theme related but even after doing a fresh install with a wp default theme the same problem happened.
Hello,
Not sure I understand. http://www.inc.com/weili-dai/why-this-female-tech-mogul-thinks-women-will-find-success-in-silicon-valley.html plays just fine, because it is on the same domain as http://www.inc.com/js/kaltura/moreViewOptions.js.
What is the embed code you’re using for http://scooblrinc.com/female-tech-mogul-thinks-women-will-find-success-silicon-valley/ which does not play? again, because scooblrinc.com and www.inc.com are not the same domain, resulting in:
Uncaught SecurityError: Blocked a frame with origin “http://cdnapi.kaltura.com” from accessing a frame with origin “http://scooblrinc.com”. Protocols, domains, and ports must match in http://www.inc.com/js/kaltura/moreViewOptions.js line line 12.
Hello,
I’m afraid that you don’t understand the question. The embedded iframes used to work normally on WP 4.6.1. but after the update to Wordpress 4.7 it stopped working.
I’ve tried to copy-paste the code in this forum but don’t know how. You may check the codes at the inc.com links that I gave you.
All embedded iframe videos originating from http://www.inc.com using / generated by Kaltura, stopped working.
I have no problems displaying embedded iframe vids from other sources like Youtube, Vimeo, etc. I guess there are some codes from http://www.inc.com/js/kaltura/moreViewOptions.js line line 12 are conflicting with new wordpress 4.7.
Can I send you an IM so I can give you the login credentials to my website. Please provide me your email.
Hi @zenithregulus,
I don’t need access to your WP.
This is the embed code I see:
var waitForKWidgetCount = 0;
waitForKWidget = function( callback ){
waitForKWidgetCount++;
if( waitForKWidgetCount > 200 ){
if( console ){
console.log( "Error kWidget never ready" );
}
return ;
}
if( ! window.kWidget ){
setTimeout(function(){
waitForKWidget( callback );
}, 5 );
return ;
}
callback();
}
waitForKWidget( function(){
if( kWidget.isUiConfIdHTML5( '36374171' ) ){
loadMw( function(){
// Load skin resources after other modules loaded
if( isIE8 ){
$( mw ).bind( 'EmbedPlayerNewPlayer', function(){
loadCustomResourceIncludes(kalturaIframePackageData.skinResources);
});
}
var customResources = [{"type":"js","src":"http:\/\/www.inc.com\/js\/kaltura\/segmentView.js"},{"type":"css","src":"http:\/\/www.inc.com\/views\/css\/kaltura\/infiniteSegmentView.css"},{"type":"js","src":"http:\/\/www.inc.com\/js\/kaltura\/moreViewOptions.js"},{"type":"css","src":"http:\/\/www.inc.com\/views\/css\/kaltura\/moreViewOptions.css"},{"type":"js","src":"http:\/\/cdnapi.kaltura.com\/html5\/html5lib\/v2.49\/kWidget\/onPagePlugins\/omnitureOnPage\/resources\/omnitureOnPage.js"}];
// IE8 has some issues with RL, so we load skin assets directly
if( isIE8 ){
customResources = customResources.concat( kalturaIframePackageData.skinResources );
}
loadCustomResourceIncludes( customResources, function(){
// Export our HTML templates
window.kalturaIframePackageData.templates = {"components\/share\/share.tmpl.html":"<div class='panel-center'>\n\t<span class=\"share-alert\"><\/span>\n\t<div class=\"share-icons-scroller\">\n\t\t<div class=\"icon-play back-btn noselection\"><\/div>\n\t\t<div class=\"icon-play next-btn noselection\"><\/div>\n\t\t<div class=\"share-icons-container\">\n\t\t\t<% $.each(networks, function(idx, network){ %>\n\t\t\t\t<div class=\"icon-border PIE\">\n\t\t\t\t\t<a href=\"<%=encodeURIComponent(network.template)%>\" data-click=\"openPopup\">\n\t\t\t\t\t\t<% if( network.icon != \"\" ) { %>\n\t\t\t\t\t\t\t<img class=\"share-network custom-share-network\" title=\"<%=network.name%>\" src=\"<%=network.icon%>\">\n\t\t\t\t\t\t<% }else{ %>\n\t\t\t\t\t\t\t<span class=\"<%=network.cssClass%> share-network\" title=\"<%=network.name%>\" id=\"<%=idx%>\"><\/span>\n\t\t\t\t\t\t<% } %>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t<% }); %>\n\t\t<\/div>\n\t<\/div>\n\n\t<% if( socialShareEnabled) { %>\n\t\t<div class=\"share-input-container share-container\">\n\t\t\t<input class=\"shareembed-input share-input\" value=\"<%= share.getConfig('shareURL') %>\" readonly\/>\n\t\t\t<!--div class=\"share-copy-btn\" data-target=\".share-input\"><%=share.locale.copyLbl%><\/div>\n\t\t\t<div class=\"icon-share-Yes share-v-icon\"><\/div-->\n\t\t<\/div>\n\t\t<% if( allowTimeOffset) { %>\n\t\t\t<div class=\"share-input-container share-offset-container\">\n\t\t\t\t<span class=\"share-label noselection\"><%=share.locale.startTimeLbl%><\/span>\n\t\t\t\t<input value=\"00:00\" class=\"shareembed-input share-offset\"\/>\n\t\t\t<\/div>\n\t\t<% } %>\n\t<% } %>\n\n\t<% if( embedEnabled) { %>\n\t\t<div class=\"share-input-container embed-container\">\n\t\t\t<input class=\"shareembed-input embed-input\" readonly\/>\n\t\t\t<!--div class=\"share-copy-btn\" data-target=\".embed-input\"><%=share.locale.copyLbl%><\/div>\n\t\t\t<div class=\"icon-share-Yes share-v-icon\"><\/div-->\n\t\t<\/div>\n\t\t<div class=\"share-input-container embed-offset-container\">\n\t\t\t<% if( allowTimeOffset) { %>\n\t\t\t\t<span class=\"share-label noselection\"><%=share.locale.startTimeLbl%><\/span>\n\t\t\t\t<input value=\"00:00\" class=\"shareembed-input share-offset\"\/>\n\t\t\t<% } %>\n\t\t\t<% if( allowSecuredEmbed) { %>\n\t\t\t\t<label class=\"share-secure-lbl noselection\"><input class=\"share-secured\" type=\"checkbox\" name=\"securedCB\" value=\"secured\"><%=share.locale.secureEmbedLbl%><\/label>\n\t\t\t<% } %>\n\t\t<\/div>\n\t<% } %>\n\n<\/div>"};
var moduleList = ["mw.MwEmbedSupport","mw.KalturaIframePlayerSetup","mw.KWidgetSupport","keyboardShortcuts","id3Tag","controlBarContainer","topBarContainer","sideBarContainer","theme","largePlayBtn","playPauseBtn","fullScreenBtn","scrubber","volumeControl","currentTimeLabel","durationLabel","share","acCheck","acPreview","liveStream","statisticsPlugin","liveAnalytics","kAnalony","qualitySettings","morePlugins","watermarkPlugin","reportError","mw.AkamaiMediaAnalytics","Hlsjs","mw.DoubleClick","mw.EmbedPlayer","kdark"];
var psModuleList = [];
moduleList = moduleList.concat(psModuleList);
var skinName = "kdark";
// IE8 has some issues with RL so we want to remove the skin
if( skinName && isIE8 ) {
var itemToDelete = jQuery.inArray(skinName, moduleList);
if( itemToDelete != -1 )
moduleList.splice( itemToDelete, 1);
}mw.config.set('pskwidgetpath', '../kwidget-ps/');mw.config.set('KalturaSupport.DepModuleList', moduleList);mw.loader.load(moduleList);mw.config.set('loadingSpinner', {"imageUrl":"","lines":"12","lineLength":10,"width":6,"radius":12,"corners":"1","rotate":"","direction":1,"color":"rgb(255,255,255)","speed":"1.6","trail":100,"shadow":false,"className":"spinner","zIndex":2000000000,"top":"auto","left":"auto","plugin":true})
if (window.inlineScript === false){mw.loader.go();} });
});
} else {
var resourcesList = [{"type":"js","src":"http:\/\/cdnapi.kaltura.com\/html5\/html5lib\/v2.49\/kWidget\/onPagePlugins\/omnitureOnPage\/resources\/omnitureOnPage.js"}];
loadCustomResourceIncludes( resourcesList, function() {
// replace body contents with flash object:
var bodyElement = document.getElementsByTagName('body')[0];
bodyElement.innerHTML = '';
var container = document.createElement('div');
container.id = window.kalturaIframePackageData.playerId + '_container';
container.style.cssText = 'width: 100%; height: 100%;';
bodyElement.appendChild(container);
var playerId = window.kalturaIframePackageData.playerId;
kWidget.outputFlashObject(playerId + '_container', {"wid":"_1034971","uiconf_id":"36374171","flashvars":{"streamerType":"auto","referrer":"http:\/\/scooblrinc.com\/"},"entry_id":"1_l7w7tlhe","params":{"wmode":"direct"}}, document);
});
}
});
And the issue the browser is complaining about stems from this:
var customResources = [{“type”:“js”,“src”:“http://www.inc.com/js/kaltura/segmentView.js"},{“type”:“css”,“src”:“http://www.inc.com/views/css/kaltura/infiniteSegmentView.css”},{“type”:“js”,"src”:"http://www.inc.com/js/kaltura/moreViewOptions.js"},{“type”:“css”,“src”:“http://www.inc.com/views/css/kaltura/moreViewOptions.css"},{“type”:“js”,“src”:"http://cdnapi.kaltura.com/html5/html5lib/v2.49/kWidget/onPagePlugins/omnitureOnPage/resources/omnitureOnPage.js”}];
Obviously, nothing in our code base, not in the player nor the WP plugin references http://www.inc.com/js/kaltura/moreViewOptions.js, so asking again, where do you get that from?
If you were to get a copy of http://www.inc.com/js/kaltura/moreViewOptions.js, place it under your site [http://scooblrinc.com/] and change the embed to load it from there instead, it should work for you.
We don’t know where that code comes from (!).
The only thing we did is copy-paste the iframe code from that particular video. For example:
Go to:
http://www.inc.com/weili-dai/why-this-female-tech-mogul-thinks-women-will-find-success-in-silicon-valley.html
and then > share > copy iframe code and paste it into blog. That’s it. This is code generated by Kaltura. And probably it created more code that blogs running on WP 4.7 don’t like.
We only have problems with iframe codes generated by Kaltura. We have no problems with iframe codes from YouTube, Vimeo, etc.
What I am trying to explain to you is that Kaltura’s code is not the problem, the problem is that inc.com loads this JS file http://www.inc.com/js/kaltura/moreViewOptions.js as part of its embed code. This fails to work from your site for the reasons explained here:
http://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame
One way to fix that, like I said, is to obtain a local copy of http://www.inc.com/js/kaltura/moreViewOptions.js and host it on your site and then change the embed code so that, again, it loads it from your own site rather than from inc.com.