Échec de l'exécution de «postMessage» sur «DOMWindow»: https://www.youtube.com! == http: // localhost: 9000

Voici le message d'erreur que j'obtiens:

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'ai vu d'autres problèmes similaires concernant l'origine de la cible http://www.youtube.comet l'origine du destinataire https://www.youtube.com, mais aucun ne ressemble au mien où se trouve la cible https://www.youtube.comet l'origine http://localhost:9000.

1. Je ne comprends pas le problème. Quel est le problème?
2. Comment puis-je y remédier?

Je crois que c'est un problème avec l'origine de la cible https. Je soupçonne que c'est parce que votre URL iFrame utilise à la httpplace de https. Essayez de changer l'URL du fichier que vous essayez d'intégrerhttps .

Par exemple:

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

être:

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

Ajoutez simplement le paramètre "origin"avec l'URL de votre site dans l' paramVarsattribut du player, comme ceci:

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

Ce réglage semble résoudre le problème:

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

Vous pouvez enregistrer le JavaScript dans des fichiers locaux:

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

Dans le premier fichier, player_apimettez ce code:

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

Dans le deuxième fichier, recherchez le code: this.a.contentWindow.postMessage(a,b[c]);

et remplacez-le par:

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

Bien sûr, vous pouvez concaténer en un seul fichier - ce sera plus efficace. Ce n'est pas une solution parfaite, mais ça marche!

Ma source: yt_api-concat

Assurez-vous que vous chargez à partir d'une URL telle que:

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

Notez le composant "origin", ainsi que "enablejsapi = 1". L'origine doit correspondre à votre domaine, puis elle sera ajoutée à la liste blanche et fonctionnera.

Essayez d'utiliser window.location.hrefpour que l'URL corresponde à l'origine de la fenêtre.

J'ai eu la même erreur. Mon erreur était que le enablejsapi=1paramètre n'était pas présent dans le iframesrc.

Je pense que la description de l'erreur est trompeuse et a à l'origine à voir avec une mauvaise utilisation de l'objet joueur.

J'ai eu le même problème lors du passage à de nouvelles vidéos dans un curseur.

En utilisant simplement la player.destroy()fonction décrite ici, le problème est résolu.

J'ai eu ce même problème et il s'avère que c'était parce que j'avais l'extension Chrome "HTTPS Everywhere" en cours d'exécution. La désactivation de l'extension a résolu mon problème.

Cette erreur exacte était liée à un blocage de contenu par Youtube lors de la «lecture sur certains sites ou applications». Plus précisément par WMG (Warner Music Group).

Le message d'erreur suggérait cependant qu'une importation iframe https vers un site http était le problème, ce qui n'était pas le cas dans ce cas.

Supprimer DNS Prefetch résoudra ce problème.

Si vous utilisez WordPress, ajoutez cette ligne dans le functions.php de votre thème

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

Vous pouvez changer votre iframe pour qu'il ressemble à ceci et ajouter l'origine à votre site Web actuel. Il résout une erreur sur mon navigateur.

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

réf: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Il pourrait y avoir l'un des éléments suivants, mais tous mènent à DOM non chargé avant son accès par le javascript.

Voici donc ce que vous devez vous assurer avant d'appeler le code JS: * Assurez-vous que le conteneur a été chargé avant tout appel javascript * Assurez-vous que l'URL cible est chargée dans le conteneur qu'elle doit

Je suis tombé sur le même problème, mais sur mon site local lorsque j'essaie de faire fonctionner mon Javascript bien avant le chargement de la page principale qui provoque le message d'erreur. Je l'ai corrigé en attendant simplement que la page entière se charge, puis en appelant la fonction requise.

Vous pouvez simplement le faire en ajoutant une fonction de délai d'expiration lorsque la page est chargée et en appelant votre événement onload comme:

window.onload = new function () {setTimeout (function () {// un événement onload}, 10); }

Cela garantira que ce que vous essayez s'exécutera bien après le déclenchement de onLoad.

Vous obtenez également ce message lorsque vous ne spécifiez pas de targetOrigin dans les appels àwindow.postMessage() .

Dans cet exemple, nous publions un message sur le premier iFrame et l'utilisons *comme cible, ce qui devrait permettre la communication avec n'importe quel targetOrigin.

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

Dans mon cas au moins, cela semble être une condition inoffensive "pas prêt" que l'API réessaye jusqu'à ce qu'elle réussisse.

J'obtiens entre deux et neuf d'entre eux (sur mon pire testeur, un FossilBook 2009 avec 20 onglets ouverts via un hotspot cellulaire) .... mais alors la vidéo fonctionne correctement. Une fois qu'il exécute mes appels basés sur postMessage pour seekTo définitivement, je n'en ai pas testé d'autres.

Dans certains cas (comme un commentateur l'a mentionné), cela peut être dû si vous déplacez le lecteur dans DOM, comme appendou etc.

Tu peux essayer :

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

J'étais également confronté au même problème, puis je visite l' API Iframe officielle de Youtube où j'ai trouvé ceci:

Le navigateur de l'utilisateur doit prendre en charge la fonctionnalité HTML5 postMessage. La plupart des navigateurs modernes prennent en charge postMessage

et errer pour voir que la page officielle était également confrontée à ce problème. Visitez simplement l' API Iframe officielle de Youtube et consultez les journaux de la console. Ma version Chrome est 79.0.3945.88.

Le mien était:

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

Je viens de supprimer la ligne avec playerVars, et cela a fonctionné sans erreur sur la console.