YouTube埋め込み動画自動再生画面なしの自動再生

Question

私のadobeのポートフォリオのウェブサイトで自動的に実行され、無限ループする動画を表示したい。私は、自動再生とループオプション（下のコードを参照）を使用してYouTube埋め込み動画を使用しようとしましたが、動画が終了するたびに再び開始する前に黒い更新画面が表示され、ウェブサイトの外観が崩れます。私が使用しているビデオフォーマットは.mp4です。私は.gifファイルでこの問題を解決できることを知っていますが、ビデオの品質は十分ではありません。ビデオをポートフォリオのWebサイトに直接ダウンロードしようとしましたが、ループや自動再生できませんでした。

この件についてお手数ですが、
おかげで、タル

コード：いくつかの研究は、私は最終的にそれが働い持った後

<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

、解決策は、APIはiframe埋め込みコードを使用することです（https://developers.google.com/youtube/iframe_api_reference）との代わりに、ループパラメータを使用してonPlayerStateChange機能を使用します。次にコード例を示します。

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