Youtube播放按鈕問題

我在Shopify商店中嵌入了一個YouTube視頻，但正如我們所知它不會在手機和標籤上自動播放，所以我使用YouTube API在外部點擊播放，因爲我不喜歡大紅色的按鈕但不能讓它消失，問題是我已經有了定位在視頻上的文本，所以不能像大多數解決方案一樣使用覆蓋圖像。Youtube播放按鈕問題

我的代碼：

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

來源

2016-12-06 Piyush Rawat

如果檢查IFrame API及其player parameter，沒有任何指令或方法有，可以告訴你如何隱藏YouTube上的大紅色播放按鈕。那麼我可以建議你使用自定義CSS來隱藏或調整播放按鈕的位置。

檢查此thread如果它可以幫助你。

有關更多信息，請檢查SO question中的其他解決方案。

來源

2016-12-07 09:12:33 KENdi

Youtube播放按鈕問題

回答

相關問題