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中的其他解决方案。

Youtube播放按钮问题

1 个答案: