Impossibile eseguire "postMessage" su "DOMWindow": https://www.youtube.com! == http: // localhost: 9000

Questo è il messaggio di errore che ottengo:

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').

Ho visto altri problemi simili in cui l'origine del bersaglio è http://www.youtube.come l'origine del destinatario è https://www.youtube.com, ma nessuno come il mio dove si trova il bersaglio https://www.youtube.come l'origine è http://localhost:9000.

1. Non capisco il problema. Qual è il problema?
2. Come posso ripararlo?

Credo che questo sia un problema con l'origine target https. Ho il sospetto che sia perché il tuo URL iFrame sta usando httpinvece di https. Prova a cambiare l'URL del file che stai cercando di incorporare https.

Per esempio:

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

essere:

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

Aggiungi il parametro "origin"con l'URL del tuo sito paramVarsnell'attributo del player, in questo modo:

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' },
}

L'impostazione sembra risolverlo:

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

È possibile salvare JavaScript in file locali:

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

Nel primo file, player_apiinserisci questo codice:

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])}}());

Nel secondo file, trova il codice: this.a.contentWindow.postMessage(a,b[c]);

e sostituiscilo con:

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

Certo, puoi concatenare in un file - sarà più efficiente. Questa non è una soluzione perfetta, ma funziona!

La mia fonte: yt_api-concat

Assicurati di caricare da un URL come:

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

Nota il componente "origin", così come "enablejsapi = 1". L'origine deve corrispondere al tuo dominio, quindi verrà inserito nella whitelist e funzionerà.

Prova a utilizzare window.location.hrefl'URL in modo che corrisponda all'origine della finestra.

Ho avuto lo stesso errore. Il mio errore è stato che il enablejsapi=1parametro non era presente in iframesrc.

Penso che la descrizione dell'errore sia fuorviante e abbia originariamente a che fare con un uso errato dell'oggetto giocatore.

Ho avuto lo stesso problema quando sono passato a nuovi video in uno slider.

Quando si utilizza semplicemente la player.destroy()funzione qui descritta, il problema scompare.

Ho avuto lo stesso problema e risulta che avevo l'estensione Chrome "HTTPS Everywhere" in esecuzione. Disabilitare l'estensione ha risolto il mio problema.

Questo errore esatto era correlato a un blocco di contenuti di Youtube quando "riprodotto su determinati siti o applicazioni". Più specificamente da WMG (Warner Music Group).

Il messaggio di errore suggeriva tuttavia che il problema era l'importazione di iframe https in un sito http, cosa che non avveniva in questo caso.

Rimuovi DNS Prefetch risolverà questo problema.

Se stai usando WordPress, aggiungi questa riga nelle funzioni.php del tuo tema

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

Puoi cambiare il tuo iframe in questo modo e aggiungere l'origine al tuo sito web attuale. Risolve l'errore sul mio browser.

<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>

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

Potrebbero esserci le seguenti, ma tutte portano a DOM non caricate prima del suo accesso da javascript.

Quindi ecco cosa devi assicurarti prima di chiamare effettivamente il codice JS: * Assicurati che il contenitore sia stato caricato prima che venga chiamato qualsiasi javascript * Assicurati che l'URL di destinazione sia caricato in qualunque contenitore debba

Mi sono imbattuto nel problema simile ma sul mio locale quando sto cercando di far funzionare il mio Javascript molto prima di caricare la pagina principale che causa il messaggio di errore. L'ho risolto semplicemente aspettando il caricamento dell'intera pagina e quindi chiamando la funzione richiesta.

Puoi semplicemente farlo aggiungendo una funzione di timeout quando la pagina è stata caricata e chiama il tuo evento onload come:

window.onload = new function () {setTimeout (function () {// alcuni eventi onload}, 10); }

ciò assicurerà che ciò che stai provando verrà eseguito bene dopo l'attivazione di onLoad.

Questo messaggio viene visualizzato anche quando non si specifica un targetOrigin nelle chiamate a window.postMessage().

In questo esempio *pubblichiamo un messaggio sul primo iFrame e lo utilizziamo come target, che dovrebbe consentire la comunicazione con qualsiasi targetOrigin.

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

Nel mio caso almeno questa sembra essere una condizione "non pronta" innocua che l'API riprova finché non riesce.

Ottengo ovunque da due a nove di questi (sul mio peggior tester, un FossilBook del 2009 con 20 schede aperte tramite hotspot cellulare) .... ma poi il video funziona correttamente. Una volta che eseguo le mie chiamate basate su postMessage per cercare, per funzionare sicuramente, non ne ho testati altri.

In alcuni casi (come menzionato da un commentatore), ciò potrebbe essere causato dallo spostamento del lettore in DOM, ad esempio appendo ecc.

Puoi provare :

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

Stavo anche affrontando lo stesso problema, quindi visito Youtube Iframe Api ufficiale dove ho trovato questo:

Il browser dell'utente deve supportare la funzione postMessage HTML5. I browser più moderni supportano postMessage

e vagare per vedere che anche la pagina ufficiale stava affrontando questo problema. Basta visitare Youtube ufficiale di Iframe Api e vedere i registri della console. La mia versione di Chrome è 79.0.3945.88.

il mio era:

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

Ho appena rimosso la linea con playerVars e ha funzionato senza errori sulla console.