Youtube播放按钮问题答案

【问题标题】：Youtube play button issueYoutube播放按钮问题
【发布时间】：2017-04-21 00:43:09
【问题描述】：

我在我的 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>

【问题讨论】：

标签： javascript youtube-api

【解决方案1】：

如果您查看IFrame API 和它的player parameter，那里没有说明或方法可以告诉您如何隐藏 YouTube 的大红色播放按钮。那么我可以建议您使用自定义 CSS 来隐藏或调整播放按钮的位置。

如果对您有帮助，请查看此thread。

有关更多信息，请查看此SO question 中的其他解决方案。

【讨论】：