Unable to post message to http://www.youtube.com. Recipient has origin http://xxxxxxxxx

Unable to post message to http://www.youtube.com. Recipient has origin
http://xxxxxxxxx

As far as I can see this is a bug in Chrome, but I can't find whether
there is a definitive fix available. My code has 4 embedded youtube videos
in Iframes and Jquery UI tabs to flip between them. And I have a class on
each tab to stop the vidoes when you change them. The error only appears
in chrome.

My code:
<div class="span9">
<div id="tabs" style="margin-top:60px;">
<div class="span3">
<ul class="craft-video-menu">
<li>
<a class="stop" href="#tabs-1">Bike Frame Shop (Oakland
Cycles)</a>
</li>
<li>
<a class="stop" href="#tabs-2">Carpenter (Alex Forsey)</a>
</li>
<li>
<a class="stop" href="#tabs-3">Georgian Khinkali</a>
</li>
<li>
<a class="stop" href="#tabs-4">Cake maker (Mum)</a>
</li>
</ul>
<h4>Video coming soon</h4>
<ul>
<li>
<a>Design Workshop (Jail Make)</a>
</li>
<li>
<a>Photographer (Arthur Sakhkalyan)</a>
</li>
<li>
<a>Bees (Serpentine Pavillion)</a>
</li>
</ul>
</div>
<div class="span6">
<!-- player divs -->
<div id="tabs-1">
<div id="player1"></div>
</div>
<div id="tabs-2">
<div id="player2"></div>
</div>
<div id="tabs-3">
<div id="player3"></div>
</div>
<div id="tabs-4">
<div id="player4"></div>
</div>
<!-- <div id="tabs-5"></div>
<div id="tabs-6"></div>
<div id="tabs-7"></div>
-->
</div>
</div>
<script>
// load api
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// make player array
var players = new Array();
function onYouTubeIframeAPIReady() {
players[0] = new YT.Player('player1', {
height: '390',
width: '640',
videoId: 'NAm_v_7nQDo'
});
players[1] = new YT.Player('player2', {
height: '390',
width: '640',
videoId: 'Y226Yf9Mx2w'
});
players[2] = new YT.Player('player3', {
height: '390',
width: '640',
videoId: 'ULvKFFMJbfY'
});
players[3] = new YT.Player('player4', {
height: '390',
width: '640',
videoId: 'RRVMzjQulnw'
});
// players[4] = new YT.Player('player5', {
// height: '390',
// width: '640',
// videoId: ''
// });
// players[5] = new YT.Player('player6', {
// height: '390',
// width: '640',
// videoId: 'RRVMzjQulnw'
// });
// players[6] = new YT.Player('player7', {
// height: '390',
// width: '640',
// videoId: 'ULvKFFMJbfY'
// });
}
$('.stop').click( function() {
//loop players array to stop them all
$(players).each(function(i){
this.stopVideo();
});
});
</script>
</div>
I also have a
jQuery(document).ready(function(){
jQuery( "#tabs" ).tabs();
});
in the header
This works fine on Safari but fails on Chrome, Is there a way I can fix
this or a better solution.