web-dev-qa-db-fra.com

Empêcher la capture de défilement d'iframe sur youtube iframe intégré sur chrome

J'ai un iframe standard youtube intégré à partir d'une vidéo aléatoire:

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/ixJ5NbvXg_A" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

Je l'ai dupliqué plusieurs fois pour obtenir un débordement de parchemin.

<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>

Quand je sers ceci en utilisant le serveur Django sur localhost, les iframes empêchent le défilement de la page.

Lorsque vous déplacez le curseur sur une vidéo, puis utilisez la molette de la souris pour faire défiler l'écran, cela ne fonctionne pas.

Ce qui est vraiment amusant, c’est que lorsque je colle le même code et que je l’enregistre dans un fichier local sur le bureau. Puis ouvrez-le avec chrome, le parchemin fonctionne sur des vidéos youtube.

J'ai vérifié dans les outils de développement, le fichier servi contient exactement le même code HTML . Il n'y a qu'un simple fichier html dans les deux cas.

Version 71.0.3578.98 (version officielle) (64 bits)

javascripthtmliframeyoutubeyoutube-api
5
Vlad Otrocol

Mon problème particulier était un bug dans Chrome. Il serait résolu si je redémarre le navigateur.

0
Vlad Otrocol

Essayez celui-ci, la dernière réponse - le https://github.com/alvarotrigo/fullPage.js/issues/2229

1
Jacob Frunze

Vous pouvez essayer de changer le css du corps comme

body{
    overflow: auto;
}
0
Super Penguino

Cela fonctionne très bien dans mes navigateurs:

<html>
<head></head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Mm2eYfj0SgA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</body></html>

Pouvez-vous poster un extrait reproduisant le problème? 

0
Mosè Raguzzini

Cela me semble un bug dans le navigateur; voici un script simple qui l’empêchera de se produire. Il ajoute un événement de défilement à la fenêtre qui désactive les événements de pointeur sur les iframes lorsque la page défile, puis les réactive 100 ms après le défilement. Étant donné que l'événement est ajouté en mode capture, il se déclenche avant que l'événement ne puisse être capturé par l'iframe.

<script>

  (function() {

    var iframes, locked = null;
    window.addEventListener("scroll", scroll, true);

    function scroll(e) {

      if (!locked) {
        iframes = document.querySelectorAll('iframe');
        lock('none');
      }

      clearTimeout(locked);
      locked = setTimeout(function() {
        locked = null;
        lock('auto');
      }, 100);

    }

    function lock(value) {
      for (var i = 0; i < iframes.length; i++) {
        iframes[i].style.pointerEvents = value;
      }
    }

  })();

</script>
0
aecend