Falha ao executar 'postMessage' no 'DOMWindow': https://www.youtube.com! == http: // localhost: 9000

Esta é a mensagem de erro que recebo:

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

Já vi outros problemas semelhantes onde a origem de destino está http://www.youtube.come a origem do destinatário https://www.youtube.com, mas nenhum como o meu onde o destino está https://www.youtube.come a origem está http://localhost:9000.

1. Eu não entendi o problema. Qual é o problema?
2. Como posso corrigir isso?

Acredito que este seja um problema com a origem de destino https. Eu suspeito que é porque seu URL do iFrame está usando em httpvez de https. Tente alterar o URL do arquivo que você está tentando incorporar https.

Por exemplo:

'//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

ser estar:

'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';

Basta adicionar o parâmetro "origin"com o URL do seu site no paramVarsatributo do player, assim:

this.player = new window['YT'].Player('player', {
    videoId: this.mediaid,
    width:'100%',
    playerVars: { 'autoplay': 1, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:8100' },
}

Definir isso parece corrigi-lo:

  this$1.player = new YouTube.Player(this$1.elementId, {
    videoId: videoId,
    host: 'https://www.youtube.com',

Você pode salvar o JavaScript em arquivos locais:

• https://www.youtube.com/player_api
• https://s.ytimg.com/yts/jsbin/www-widgetapi-vfluxKqfs/www-widgetapi.js

No primeiro arquivo, player_apicoloque este código:

if(!window.YT)var YT={loading:0,loaded:0};if(!window.YTConfig)var YTConfig={host:"https://www.youtube.com"};YT.loading||(YT.loading=1,function(){var o=[];YT.ready=function(n){YT.loaded?n():o.push(n)},window.onYTReady=function(){YT.loaded=1;for(var n=0;n<o.length;n++)try{o[n]()}catch(i){}},YT.setConfig=function(o){for(var n in o)o.hasOwnProperty(n)&&(YTConfig[n]=o[n])}}());

No segundo arquivo, encontre o código: this.a.contentWindow.postMessage(a,b[c]);

e substitua-o por:

if(this._skiped){
    this.a.contentWindow.postMessage(a,b[c]); 
}
this._skiped = true;

Obviamente, você pode concatenar em um arquivo - será mais eficiente. Esta não é uma solução perfeita, mas funciona!

Minha fonte: yt_api-concat

Verifique se você está carregando de um URL como:

https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1

Observe o componente "origin", bem como "enablejsapi = 1". A origem deve corresponder ao seu domínio e, em seguida, ela estará na lista de permissões e funcionará.

Tente usar window.location.hrefo URL para corresponder à origem da janela.

Eu recebi o mesmo erro. Meu erro foi que o enablejsapi=1parâmetro não estava presente no iframesrc.

Eu acho que a descrição do erro é enganosa e originalmente tem a ver com o uso incorreto do objeto player.

Eu tive o mesmo problema ao mudar para novos vídeos em um Slider.

Ao usar simplesmente a player.destroy()função descrita aqui, o problema desaparece.

Eu tive esse mesmo problema e, ao que parece, era porque eu estava executando a extensão "HTTPS Everywhere" do Chrome. Desativar a extensão resolveu meu problema.

Este erro exato estava relacionado a um bloco de conteúdo do YouTube quando "reproduzido em determinados sites ou aplicativos". Mais especificamente por WMG (Warner Music Group).

No entanto, a mensagem de erro sugeria que a importação de iframe https para um site http era o problema, o que não ocorria nesse caso.

Remover a Pré-busca DNS resolverá esse problema.

Se você estiver usando o WordPress, adicione esta linha nas funções do seu tema.php

remove_action( 'wp_head', 'wp_resource_hints', 2 );

Você pode alterar o iframe para ficar assim e adicionar a origem ao site atual. Ele resolve o erro no meu navegador.

<iframe class="test-testimonials-youtube-group"  type="text/html" width="100%" height="100%"
  src="http://www.youtube.com/embed/HiIsKeXN7qg?enablejsapi=1&origin=http://localhost:8000"
  frameborder="0">
</div>

ref: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Pode haver um dos seguintes, mas todos eles levam ao DOM não carregado antes de ser acessado pelo javascript.

Então, aqui está o que você deve garantir antes de realmente chamar o código JS: * Verifique se o contêiner foi carregado antes que qualquer javascript seja chamado * Verifique se o URL de destino está carregado em qualquer contêiner que ele precise

Me deparei com o problema semelhante, mas no meu local quando estou tentando executar o Javascript bem antes do onLoad da página principal que causa a mensagem de erro. Corrigi-o simplesmente aguardando o carregamento da página inteira e, em seguida, chamo a função necessária.

Você pode simplesmente fazer isso adicionando uma função de tempo limite quando a página for carregada e chamar seu evento onload como:

window.onload = nova função () {setTimeout (function () {// algum evento onload}, 10); }

isso garantirá que o que você está tentando executará bem depois que o onLoad for acionado.

Você também recebe essa mensagem quando não especifica um targetOrigin nas chamadas para window.postMessage().

Neste exemplo, postamos uma mensagem no primeiro iFrame e usamos *como destino, o que deve permitir a comunicação com qualquer targetOrigin.

window.frames[0].postMessage({
                    message : "Hi there",
                    command :"hi-there-command",
                    data : "Some Data"
                }, '*')

Na minha instância, pelo menos, isso parece ser uma condição inofensiva "não pronta", que a API tenta novamente até que seja bem-sucedida.

Recebo de dois a nove deles (no meu pior caso, um FossilBook de 2009 com 20 abas abertas via hotspot de celular) ... mas o vídeo funciona corretamente. Depois de executar minhas chamadas pós-baseadas em Message to seekTo definitivamente funcionar, não testei outras.

Em alguns casos (como um comentarista mencionou), isso pode ser causado se você estiver movendo o player dentro do DOM, como appendou etc.

Podes tentar :

document.getElementById('your_id_iframe').contentWindow.postMessage('your_message', 'your_domain_iframe')

Eu também estava enfrentando o mesmo problema, então visito o oficial Iframe Api do Youtube, onde encontrei isso:

O navegador do usuário deve oferecer suporte ao recurso post5 de HTML5. Os navegadores mais modernos oferecem suporte ao postMessage

e passear ao ver que a página oficial também estava enfrentando esse problema. Basta visitar a oficial Iframe Api do YouTube e ver os registros do console. Minha versão do Chrome é 79.0.3945.88.

o meu era:

<youtube-player
  [videoId]="'paxSz8UblDs'"
  [playerVars]="playerVars"
  [width]="291"
  [height]="194">
</youtube-player>

Acabei de remover a linha com o playerVars, e funcionou sem erros no console.