Youtube API - Failed to execute 'postMessage' on 'DOMWindow'

Question

I'm trying to start a youtube video when a modal is opened and not progress to the next page until it is completed.

My script below works in Chrome but produces this error in Firefox and Edge.

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

Javascript

<script src="http://www.youtube.com/player_api"></script>

<script>

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {          
            alert('Thank you for watching - Click OK to see your results');
        }
    }

</script>

<script language="JavaScript">
    $(document).ready(function() {
        $('#post_form').submit(function() { // catch the form's submit event
            $("#adModal").modal("show");
            var time = $('#adtime').val();
            //startCountdownTimer(time) ;

            // create youtube player
            var player;
            player = new YT.Player('player', {
                width: '640',
                height: '390',
                videoId: 'EF-jwIv1w68',
                host: 'http://www.youtube.com',
                events: {
                    onReady: onPlayerReady,
                    onStateChange: onPlayerStateChange
                }
            });

        });
    });
</script>

I have reviewed this question/answer but cannot seem to get it working with my code by amending the http / https.

Answer 1

In my Case "widget_referrer" was missing. If nothing works for you, try widget_referrer :window.location.href

other possible properties one might miss are

origin:window.location.href, enablejsapi:1,