YouTube: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>')

Question

I have implemented a page with tabs that load YT videos, using the YT iframe API.

For about 60%-70% of the videos (out of a total of about 150 videos), I get: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').. The ones that fail also appear to be random. Also sometimes more fail and sometimes less.

I have tested most of the videos that fail with that message, and they are playing when using the URL directly in a browser, so I know the videos are fine. They are from diffrerent sources, and mostly from career growth channels, so they are most likely not private videos either, even though that is just an educated guess.

I have seen several posts on SO and other sites showing possible solutions, ranging from:

• Change/add the origin
• Change between http and https
• Check your limits
• Adjust the host property
• Check that the videos are not marked as private
• Ensure that you are not logged in to Google account

None of these are working for me. One of the articles said it does not even matter what you set the host to, because the widget.js file automatically sets it to youtube.com, and I confirmed that.

Each video is wrapped in its own onPlayerReady and onPlayerStateChange function, which is called in a loop in the onYouTubeIframeAPIReady function, as follows:

function onYouTubeIframeAPIReady() {
    <?php foreach ($youtube_links as $k => $v): ?>
    player<?php echo $v['youtube_link_id']; ?> = new YT.Player('player<?php echo $v['youtube_link_id']; ?>', {
        height: '100%',
        width: '100%',
        videoId: '__YOUTUBE_LINK_PATH_<?php echo $v['youtube_link_id']; ?>__',
        host: 'https://www.youtube.com',
        playerVars: {
            'playsinline': 1,
            'controls': 1,
            'autoplay': 0,
            'modestbranding': 1,
            'origin': '<?php echo site_url(); ?>'
        },
        events: {
            'onReady': onPlayerReady<?php echo $v['youtube_link_id']; ?>,
            'onStateChange': onPlayerStateChange<?php echo $v['youtube_link_id']; ?>
        }
    });
    <?php endforeach; ?>
}

I can confirm that the placeholder I use in the videoId property is correctly replaced when I view source of the document.

It is currently only me using this site and its page, as I am still in development, so I doubt it can be a limits issue, as all the posts referring to limits indicate that I have more than 10000 requests per second per user available. If limits are to blame, I can only think about concurrent requests for these 150 videos somehow exceeds that, as there is no delay in loading. Could this be the case, and if so, how can I insert a delay there?

Any other ideas, perhaps? TIA.

Answer 1

Without a real answer to this issue found after searching for weeks and browsing and trying over 20 proposed solutions, I have decided to split the videos up in separate pages in my CMS. Once that was done, and the pages now contained less videos, all the videos display properly.