I'm getting this error when I use the Youtube API to embed a video on Chrome:
"origin youtube api Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('XXXXXXX')."
It works fine, but I get that error.
If I'm doing a simple Youtube iframe embed, I typically solve this problem by adding an origin setting to the URL. However, I don't seem to be able to do this with the API. I added an origin to the playerVars but it doesn't resolve the error.
<script async src="https://youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player1;
player1 = new YT.Player('YouTubePlayer', {
videoId: 'XXXXXXXXXXXX',
width: 1920,
height: 1080,
playerVars: {
autoplay: 1,
start: 40,
end:640,
controls: 0,
showinfo: 0,
enablejsapi: 1,
origin: 'https://XXXXXXXXX.com',
modestbranding: 1,
loop: 1,
fs: 0,
cc_load_policy: 0,
iv_load_policy: 3,
autohide: 0
},
events: {
onReady: function(e) {
e.target.mute();
player1.addEventListener('onStateChange', function(e) {
var id = 'XXXXXXXXX';
if(e.data === YT.PlayerState.ENDED){
player1.loadVideoById({'videoId': id,
'startSeconds': 40,
'endSeconds': 640,
'suggestedQuality': 'large'});
};
});
}
}
});
Where should I add an origin? Or is there another way to address this problem? Thanks!