Boucle automatique intégrée à la vidéo YouTube sans actualisation de l'écran

Question

Je souhaite afficher une vidéo qui démarre automatiquement et boucle à l'infini sur le site Web du portefeuille Adobe. J'ai essayé d'utiliser la vidéo intégrée YouTube avec autoplay et les options de boucle (voir ci-dessous le code), cependant, chaque fois que la vidéo se termine, il y a un écran de rafraîchissement noir qui recommence, ce qui ruine l'apparence de mon site. Le format vidéo que j'utilise est .mp4. Je sais qu'avec le fichier .gif ce problème peut être résolu, cependant, la qualité vidéo ne sera pas suffisante. J'ai essayé de télécharger la vidéo dans le site Web du portefeuille directement, cependant, je ne pouvais pas le faire en boucle ou en lecture automatique.

J'apprécierais votre aide dans ce domaine.
Merci, Tal

Le code:

<iframe width="1920" height="1080" 
    src="https://www.youtube.com/embed/youtubelink?rel=0&autoplay=1&controls=0&loop=1&playlist=youtubelink&amp;controls=0&amp;showinfo=0" 
    frameborder="0" allowfullscreen> 
</iframe> 

Answer 1

Après quelques recherches, je l'ai finalement obtenu ce travail, la solution est d'utiliser le code embed API iFrame (https://developers.google.com/youtube/iframe_api_reference) et au lieu d'utiliser le paramètre de boucle vous utilisez la fonction onPlayerStateChange. Voici un exemple de code:

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

         var player; 
         function onYouTubeIframeAPIReady() { 
         player = new YT.Player('player', { 
          videoId: '<?php the_field('homepage_video_background_id'); ?>', 
          playerVars: { 
           modestbranding: 0, 
           autoplay: 1, 
           controls: 0, 
           showinfo: 0, 
           wmode: 'transparent', 
           branding: 0, 
           rel: 0, 
           autohide: 0, 
           origin: window.location.origin 
          }, 
          events: { 
           'onReady': onPlayerReady, 
           'onStateChange': onPlayerStateChange 
          } 
          }); 
         } 
         function onPlayerReady(event) { 
          event.target.playVideo(); 
         } 
         function onPlayerStateChange(event) { 
          if (event.data === YT.PlayerState.ENDED) { 
           player.playVideo(); 
          } 
         } 
        </script>