YouTubeの再生ボタンの問題

Question

ShopifyストアにYouTube動画を埋め込んでいますが、携帯端末やタブで自動再生されないので、YouTube APIを使用して外部のクリックで再生しました大きな赤いボタン しかし、それが消えてしまう問題は、すでにビデオの上にテキストが配置されているので、ほとんどのソリューションのようにオーバーレイイメージを使用できません。

マイコード：

<div class="video-wrapper"> 
    <div id="bucklesburyVideo"></div> 
</div> 
<script> 
    var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    var player; 

    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('bucklesburyVideo', { 
      playerVars: { 
       'playlist': 'f8BxdOvj1Ho', 
       'loop': 1, 
       'autoplay': 1, 
       'controls': 0, 
       'showinfo': 0, 
       'wmode': 'opaque' 
      }, 
      videoId: 'f8BxdOvj1Ho', 
      events: { 
       'onReady': onPlayerReady 
      } 
     }); 
    } 

    function onPlayerReady(event) { 
     event.target.mute(); 
     var playButton = document.getElementById("play-button"); 
     playButton.addEventListener("click", function() { 
      player.playVideo(); 
     }); 

     var pauseButton = document.getElementById("pause-button"); 
     pauseButton.addEventListener("click", function() { 
      player.pauseVideo(); 
     }); 
    } 
</script> 

Answer 1

あなたはIFrame APIとそのplayer parameterを確認する場合は、命令または方法は、YouTubeの大きな赤い再生ボタンを非表示にするにはどのようにお見せできることがありません。では、カスタムCSSを使用して再生ボタンの位置を隠すか調整することをお勧めします。

お手数ですがthreadをご確認ください。

詳細については、SO questionの他の解決方法を参照してください。