I keep receiving “Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://youtube.com’) does not match the recipient window’s origin (‘https://www.youtube.com’).”
The issue is with the www. The video plays but it just keeps throwing the above error repeatedly.
I’ve tried adding “www” to the source link, but then it returns a 404 for the video. I’m still not having any luck. Any ideas?
Here are the code snippets
$(document).ready(function() {
// Add custom contents from html file using an iframe:
$('body').append('<div id="iframe-o" style="visibility: hidden;
position: relative; display: table; margin: auto;"><div id="iframe-m"
style="display: table-cell; vertical-align: middle;"><div id="iframe-i"
style="display: inline-block; width:100%; overflow-y: auto;
overflow-x: hidden;"><iframe id="iframe" src="'+src+'" style="width: 100%; height: 100%;">
</iframe></div></div></div>');
<!doctype html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<script src="https://youtube.com/player_api"></script>
<style>
.player {
pointer-events: none;
position: absolute;
}
</style>
<script>
</script>
</head>
<body style="width: 95vw; height: 95vh; position: relative;">
<iframe class="ytplayer" id="player" style="width: 60%;
height: 60%; display: block; position: absolute; top: 60%;
left: 60%; transform: translate(-50%, -50%);"
src="https://youtube.com/embed/UZ3oEn5Q7U4?&
cc_load_policy=3&autoplay=1&start=0&
fs=0&controls=1&modestbranding=1&
disablekb=0&loop=1&enablejsapi=1"></iframe>
<script type="text/javascript">
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'kpCJyQ2usJ4',
events: {
'onStateChange': function(e){
if(e.data == 0){
parent.$(window.top).data('continueRoutine', false);
}
}
}
});
}
</script>
</body>
</html>
Any help would be appreciated.