web-dev-qa-db-fra.com

API YouTube et requêtes d'origine croisée

YouTube a-t-il commencé à verrouiller les requêtes croisées?

J'utilise une vidéo en plein écran de héros en lecture automatique sur mon site Web, qui fonctionne correctement depuis longtemps. Au cours des deux dernières semaines, il a cessé de fonctionner et j'ai l'erreur suivante dans les journaux.

Échec d'exécution de 'postMessage' sur 'DOMWindow': l'origine cible fournie (' https://www.youtube.com ') ne correspond pas à l'origine de la fenêtre du destinataire (' https: //tbrogames.github .io ').

Selon la réponse à cette question question

J'ai essayé de changer l'hôte entre http et https pour voir si cela résoudrait les problèmes et ce n'était pas le cas.

Mon site Web qui génère l'erreur: https://tbrogames.github.io/

J'ai pu trouver un site Web de jeux plus grand qui présente également ce problème.https://playbattlegrounds.com/main.pu

Ils utilisent également une vidéo youtube comme vidéo héros/splash; et cela ne fonctionne plus, jetant la même erreur.

Le javascript correspondant peut être trouvé ici https://github.com/tbrogames/tbrogames.github.io/blob/master/js/defer.js

Cependant, cela fonctionnait depuis longtemps et je n’ai changé aucun code. C'est pourquoi je pense que c'est un changement apporté par YouTube.

youtubeyoutube-api
6
erebel55

Je pense que cette erreur est trompeuse. J'ai eu le même problème, mais je crois que c'est en fait le chrome qui ne joue plus automatiquement le héros. Je reçois cette erreur: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.https://developers.google.com/web/updates/2017/09/autoplay-policy-changes }

La solution pour moi consistait à appeler muet sur la vidéo en Javascript Avant lire la vidéo. La version iframe de l'incorporation avec les mêmes propriétés serait pas à lecture automatique.

<script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ythero', {
          videoId: '3FjTef9gn3Q',
          height: '100%',
          width: '100%',
          playerVars: {
            rel: 0,
            controls: 0,
            showinfo: 0,
            autoplay: 1,
            loop: 1,
            playlist: '3FjTef9gn3Q',
            modestbranding: 1
          },
          events: {
            'onReady': onPlayerReady,
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.mute();
        event.target.playVideo();
      }
    </script>
1
relytmcd

YouTube le permet. Assurez-vous de charger depuis 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 "Origine", ainsi que "enablejsapi = 1". L'origine doit correspondre à votre domaine. Il sera ensuite ajouté à la liste blanche et fonctionnera.

1
Gregory Magarshak