YouTube iframe api (existing iframe); Cannot get iframe-api to work

Question

I am making a "video cycler" which will allow us to have multiple videos on one website; but only have one of them large. The plan was to have them "auto cycle" when the video is finished playing. I was going to use the onStateChange feature to figure out when I should cycle them. All is going well expect for the fact that I cannot seem to get the api to work.

(using a different videoID because the real video isn't public yet)

HTML:

<iframe id="video0" width="640" height="385" src="https://www.youtube.com/embed/dREeDjQ0jIg?rel=0&enablejsapi=1&origin=*" frameborder="0" allowfullscreen></iframe>

JavaScript:

var player;
function onYouTubeIframeAPIReady() {
    video = document.getElementById('video0');
    player = new YT.Player(video, {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
            }
        })
    }
function onPlayerReady(e) {
    console.log("hey Im ready");
    }
function onPlayerStateChange(e) {
    console.log(e)
    }

Log: Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

It turns out that my issue was the a combo of the video not being public and not having my server in the

&origin=SERVER_URL/IP

I listed out the full path to my file (it was a local server, so I did some port forwarding).

Answer 2

I don't think there is any problem with the iframe ! since the real video is not public yet error 404 is what you can expect !