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.

You might wanna read this question: https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work — Adelin, Dec 18 '17 at 08:28
that helped me https://stackoverflow.com/questions/50857499/youtube-api-error-failed-to-execute-postmessage-on-domwindow — Shady Mohamed Sherif, May 08 '19 at 05:05

score 8 · Accepted Answer · answered Dec 20 '17 at 21:15

I think that the error message is a little bit misleading, as it has nothing to do with your actual host, but is more about how resources from youtube.com are referenced on the page.

There are two things I would suggest in order to get rid of this error message. (At least these were working in my case.)

First and foremost you should reference the IFrame Player API script via https. When called with http, YouTube redirects that script request automatically to it’s https counterpart, so if you reference the script directly from https, that eliminates this extra redirect. But most importantly, in case your production environment ever goes to https, it won’t load that script over http, but will throw a “Blocked loading mixed active content” error.

According to my tests this change alone would already magically solve the issue. However in case you would prefer to leave that on http, there is this other thing:

Reading through the Loading a Video Player and the Supported Parameters sections of the API docs, there is no mention about the host parameter at all. In fact when I removed that line from the Player parameters I didn't receive the error message any more. Also, interestingly, when I set host literally to http://www.example.com, the error message reads: The target origin provided (‘http://www.example.com’) does not match the recipient window’s origin ….) Therefore I think the host parameter should not be set by the client.

Sidenote: If you have a look at the contents of https://www.youtube.com/player_api, you will see this statement: var YTConfig = {'host': 'http://www.youtube.com'};. To me it means that http://www.youtube.com is some kind of a default for host anyways, so even if you go and set it in the client code, you could try to set it to https://www.youtube.com.

Long story short, try to use <script src="https://www.youtube.com/player_api"></script> and comment out the host. This is my 2 cents.

Sadly, for us, removing the `host` portion of the YT define, didn't resolve the errors coming from youtube. This is even in 2020 now lol. Also, everything is https over here, so there isn't any disconnect with that being the problem. This is just one of those annoying errors, which seem to have zero actual affect on the functionality of youtube videos. — IncredibleHat, Jun 11 '20 at 14:24
@TheDeadMan No. After hundreds of page refreshes in testing it, it appears to be a benign error caused by a race issue (async) within the youtube iframe api (sometimes happens, sometimes not). Since its entirely their end, theres nothing we can do to fix it on our end. — IncredibleHat, Jun 26 '20 at 19:18

score 3 · Answer 2 · answered Aug 13 '19 at 19:23

3

In my case (similar to the selected answer here Youtube API error - Failed to execute 'postMessage' on 'DOMWindow':) It came down the to the fact that the video was not visible on the page at the time Player was instantiated.

answered Aug 13 '19 at 19:23

Jason at ServoCity

31
1

1

I was so hopeful about this, but I'm still getting `Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').` – Ryan Aug 25 '19 at 19:21

score 2 · Answer 3 · answered Dec 24 '17 at 12:07

2

The solution was simple, although I do not know why. By removing the api from the modal it worked fine. Within the modal it wouldn't.

answered Dec 24 '17 at 12:07

HenryM

5,557
7
49
105

score 2 · Answer 4 · answered Jan 24 '20 at 15:00

2

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,

answered Jan 24 '20 at 15:00

Piyush

74
6

score 0 · Answer 5 · answered Aug 27 '18 at 11:05

0

My website is configured without the www and the youtube link was with www that's why i was getting this error. Try to make it similar, I removed www from my youtube, and it works.

answered Aug 27 '18 at 11:05

Awsme Sandy

1,398
7
20

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

5 Answers5

Linked

Related