When I run an embedded YouTube video with an iframe in my Chrome browser using the YouTube Embedded Video JavaScript API, I'm getting the following error in my console:
www-widgetapi.js:581 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://symfony.XXXXXX.com').
I'm serving the web-page containing the iframe who's src attribute is set to the YouTube video's URL along with several settings in URL search parameters, including the origin parameter set to my web-page's URL. Here is the iframe:
"<iframe width="480" height="390" frameborder="0"
src="https://www.youtube.com/embed/rs50Ie1dHXg?autohide=1&autoplay=1&cc_load_policy=0&controls=0&disablekb=1&enablejsapi=1&fs=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&start=0&widgetid=1&origin=https://symfony.XXXXXX.com"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>"
I've verified the above against the YouTube object contents after executing the following statements, and the YouTube API object properly had the above values. Here are the statements that I'm using to create the YouTube API object:
const IFRAME = document.querySelector( 'iframe#YouTube-Player.YouTube-iframe' );
const $IFRAME = $( IFRAME );
var switches = { 'autohide' : 1, 'autoplay' : 1,
'cc_load_policy' : 0, 'controls' : 0,
'disablekb' : 1, 'enablejsapi' : 1,
'fs' : 0, 'iv_load_policy' : 3,
'modestbranding' : 1, 'rel' : 0,
'showinfo' : 0, 'start' : 0,
'widgetid' : 1,
'origin' : window.location.origin };
//
// In my code I have a function that reads the switches object and assigns its
// contents them as a string to the iframe's src attribute, but for simplicity,
// I'm assigning that content directly to the end of the YouTube Video URL that
// I'm setting the iframe's src attribute to.
//
var str_switches = '?autohide=1&autoplay=1' +
'&cc_load_policy=0&controls=0' +
'&disablekb=1&enablejsapi=1' +
'&fs=0&iv_load_policy=3' +
'&modestbranding=1&rel=0' +
'&showinfo=0&start=0' +
'&widgetid=1' +
'&origin=https://symfony.######.com";
IFRAME.src = 'https://www.youtube.com/embed/rs50Ie1dHXg' +
'?autohide=1&autoplay=1' +
'&cc_load_policy=0&controls=0' +
'&disablekb=1&enablejsapi=1' +
'&fs=0&iv_load_policy=3' +
'&modestbranding=1&rel=0' +
'&showinfo=0&start=0' +
'&widgetid=1' +
'&origin=https://symfony.######.com";
var youtubePlayer = new YT.Player( 'YouTube-Player',
{ videoId : 'rs50Ie1dHXg',
width : Math.max( IFRAME.clientWidth,
$IFRAME.width() ),
height : Math.max( IFRAME.clientHeight,
$IFRAME.height() ),
name : 'a_blank',
playerVars : switches,
events : { 'onError' : onError,
'onReady' : onPlayerReady,
'onStateChange' : onPlayerStateChange }
} );
I'm not showing the onError, onPlayerReady, and onStateChange event handlers, but they work, the video plays, and the onPlayerReady, and onStateChange event handler functions are properly called, allowing me to monitor the progress of the video as it plays, pauses, and finishes.
As others have already said, this message is misleading. Yes, unless I was running my site from the YouTube site, there would be no other valid reason that my site's origin would match the target origin. So obviously, the YouTube API is complaining about something else.
I looked at all of the Stack Overflow issues on this subject, as well as what I could find on the Internet, but either there weren't any answers, what answers were given didn't apply, or trying the few that seemed helpful, didn't resolve the error that I'm getting, including that I needed to be running my web-site with an HTTPS URL and just leaving out the origin parameter.
Why is the Failed to execute postMessage... error occurring and what impact does it have on my ability to monitor and control the video's play.
Thank you.