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
}
});
},
});
}