Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin?

Question

[Islam Ibakaev]

Нужно было сделать свою кнопку для youtube видео, пришлось использовать youtube iframe api.
Всё заработало, только в консоли эта ошибка
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('champ-food.ru').
Она как бы ни на что не влияет, но глаза мозолит. Как убрать эту ошибку?

Answer 1

[Юрий]

Там, где в iframe идет вызов видео, попробуйте поменять youtube.com/....... на https://youtube.com/.......

Comments

[Islam Ibakaev]

у меня такого нет, мои настройки

onYouTubeIframeAPIReady = function () {
    player = new YT.Player('main-video-player', {
        height: '244',
        width: '100%',
        videoId: 'O6AFWXRqjes', 
        playerVars: {
            'autoplay': 0,
            'rel': 0,
            'showinfo': 0
        },
        ...

    });
}

[Юрий]

Вопрос больше к JS относится, а не к вордпрессу, но я попробую)
Где-то в скрипте должна быть строка "tag.src = "www.youtube.com/...." - вот в ней попробуйте заменить http на https.
И еще, как вариант, перед инициализацией iframe, уничтожать предыдущие экземпляры iframe(если такие есть). Как-то так:

if (player.destroy) {
  player.destroy();
}

[sinneren]

Islam Ibakaev, не нашлось решение?

[Лев Розанов]

sinneren, origin: location.hostname

[sinneren]

Лев Розанов, я такое пробовал, что-то не особо помогло. на стеке это писали как решение,но увы

[Лев Розанов]

sinneren, очень странно. Я только что добавил эту строку в проект и ошибка пропала.
А если вместо location.hostname указать просто домен (с https) - все равно не работает?

[sinneren]

Лев Розанов, мб тогда тестировал не так, щас еще попробую

[sinneren]

Лев Розанов, сегодня релизнули, не помогло.

[Лев Розанов]

sinneren, да, когда я написал, что ошибка пропала - она появилась опять в тот же день. В общем, это стало уже делом принципа и у меня вроде как получилось.

1. Подключение API делаю так:

var tag = document.createElement('script');

tag.src = "https://youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

2. Так как iframe создается динамически, я добавил пустой iframe c id, который указан в YT.Player.

Сейчас ошибки нет) Может и не появится)

[sinneren]

Лев Розанов, что-то я не понял как оно создаст видео, у меня iframe как был пустой, так и остался. Вообще, я делаю так:

function onYouTubeIframeAPIReady (code) {
        var tag = document.createElement('iframe');

        tag.src = 'https://www.youtube.com/embed/' + code + '/';
        tag.width = '100%';
        tag.height = 200;
        tag.frameborder = 0;
        tag.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
        tag.allowfullscreen = true;
        tag.loading = 'lazy';

        container.append(tag);
    }

Сами id у меня из аякса

Answer 2

[Лев Розанов]

Вдруг, кому пригодится. Нужно добавить в параметры:
origin: location.hostname