Failed to execute 'postMessage' on 'DOMWindow': target origin provided does not match recipient window's origin

Viewed 1383

So I tried using YouTube's player API and it worked great for the first 2 or 3 instances. It then broke down and stopped working, refusing to render any videos I pass to it.

It seems to be throwing this error in the console around twice a second, every 500ms.

www-widgetapi.js:100 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost').

Here is the code

let ajax_url = "http://localhost/scripts/ajax";
let newest_video;
let player;

$(document).ready(() => {
    loadVideo();
});

function onPlayerReady(event) {
    event.target.playVideo();
}

function onPlayerStateChange(event) {        
    if(event.data === 0) {
        loadVideo(true);
    }
}

function loadVideo(next = false) {
    $.ajax({
        url: ajax_url + '/get_link.php',
        data: { 
            "selection": (next ? "not_first" : "first")
        },
        type: 'GET',
        error: function(data) {
            alert(data);
        },
        success: function(data) {
            newest_video = data;

            let videoId = data.substring(data.lastIndexOf('=') + 1);

            if (next) {
                alert('loading second video<br>' + data + '<br>' + videoId);
            }

            player = new YT.Player('player', {
                width: '1100',
                height: '590',
                videoId: videoId,
                events: {
                    onReady: onPlayerReady,
                    onStateChange: onPlayerStateChange
                }
            });
        },
    });
}
0 Answers
Related