Error al ejecutar 'postMessage' en 'DOMWindow': https://www.youtube.com! == http: // localhost: 9000

Este es el mensaje de error que recibo:

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

He visto otros problemas similares donde está el origen del destino http://www.youtube.comy el origen del destinatario https://www.youtube.com, pero ninguno como el mío donde está el destino https://www.youtube.comy el origen http://localhost:9000.

1. No entiendo el problema. ¿Cuál es el problema?
2. ¿Cómo puedo arreglarlo?

Creo que este es un problema con el origen del destino https. Sospecho que es porque su URL de iFrame está usando en httplugar de https. Intenta cambiar la url del archivo que intentas insertar para que sea https.

Por ejemplo:

'//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';

Simplemente agregue el parámetro "origin"con la URL de su sitio en el paramVarsatributo del reproductor, así:

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

Establecer esto parece solucionarlo:

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

Puede guardar el JavaScript en archivos locales:

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

En el primer archivo, player_apiponga 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])}}());

En el segundo archivo, busque el código: this.a.contentWindow.postMessage(a,b[c]);

y reemplazarlo con:

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

Por supuesto, puede concatenar en un archivo, será más eficiente. ¡Esta no es una solución perfecta, pero funciona!

Mi fuente: yt_api-concat

Asegúrese de cargar desde una 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

Tenga en cuenta el componente "origen", así como "enablejsapi = 1". El origen debe coincidir con su dominio, y luego se incluirá en la lista blanca y funcionará.

Intente usar window.location.hrefla url para que coincida con el origen de la ventana.

Tengo el mismo error. Mi error fue que el enablejsapi=1parámetro no estaba presente en el iframesrc.

Creo que la descripción del error es engañosa y originalmente tiene que ver con el uso incorrecto del objeto jugador.

Tuve el mismo problema al cambiar a nuevos videos en un control deslizante.

Cuando simplemente se usa la player.destroy()función descrita aquí, el problema desaparece.

Tuve este mismo problema y resultó que era porque tenía la extensión de Chrome "HTTPS Everywhere" ejecutándose. Deshabilitar la extensión resolvió mi problema.

Este error exacto estaba relacionado con un bloqueo de contenido de Youtube cuando se "reproducía en ciertos sitios o aplicaciones". Más específicamente por WMG (Warner Music Group).

Sin embargo, el mensaje de error sugirió que el problema era una importación de iframe https a un sitio http, lo que no fue en este caso.

Eliminar DNS Prefetch resolverá este problema.

Si está utilizando WordPress, agregue esta línea en las funciones de su tema.php

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

Puede cambiar su iframe para que sea así y agregar origen para que sea su sitio web actual. Resuelve el error en mi 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

Podría haber cualquiera de los siguientes, pero todos ellos conducen a DOM no cargado antes de que javascript acceda a él.

Así que esto es lo que debe asegurarse antes de llamar realmente al código JS: * Asegúrese de que el contenedor se haya cargado antes de que se llame a javascript * Asegúrese de que la URL de destino esté cargada en cualquier contenedor que tenga que

Me encontré con un problema similar, pero en mi local cuando intento que mi Javascript se ejecute mucho antes en la carga de la página principal que causa el mensaje de error. Lo arreglé simplemente esperando que se cargue toda la página y luego llame a la función requerida.

Simplemente puede hacer esto agregando una función de tiempo de espera cuando la página se haya cargado y llame a su evento de carga como:

window.onload = nueva función () {setTimeout (function () {// algún evento de carga}, 10); }

eso asegurará que lo que está intentando se ejecutará bien después de que onLoad se active.

También recibe este mensaje cuando no especifica un targetOrigin en las llamadas a window.postMessage().

En este ejemplo, publicamos un mensaje en el primer iFrame y lo usamos *como objetivo, lo que debería permitir la comunicación con cualquier targetOrigin.

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

En mi caso, al menos esto parece ser una condición inofensiva "no lista" que la API vuelve a intentar hasta que tiene éxito.

Obtengo entre dos y nueve de estos (en mi peor de los casos, un FossilBook 2009 con 20 pestañas abiertas a través de un punto de acceso celular) ... pero luego el video funciona correctamente. Una vez que se está ejecutando, mis llamadas basadas en postMessage para seekTo definitivamente funcionan, no he probado otras.

En algunos casos (como mencionó un comentarista) esto podría ser causado si está moviendo el reproductor dentro de DOM, como appendo etc.

Puedes probar :

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

También estaba enfrentando el mismo problema y luego visito la API oficial de Iframe de YouTube donde encontré esto:

El navegador del usuario debe ser compatible con la función HTML5 postMessage. La mayoría de los navegadores modernos admiten postMessage

y pasear para ver que la página oficial también enfrenta este problema. Simplemente visite la API oficial de Iframe de Youtube y vea los registros de la consola. Mi versión de Chrome es 79.0.3945.88.

la mía fue:

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

Acabo de eliminar la línea con playerVars, y funcionó sin errores en la consola.