找到一个代码来检测YouTube视频结束并在Wordpress上隐藏相关视频

Question

我正在寻找一些有关为 Wordpress 创建代码片段的帮助，以自动检测嵌入 YouTube 视频何时结束并隐藏相关视频。

我在互联网上找到了一个代码示例，但适用于单个视频。如果能够找到一个可以在 Wordpress 标准嵌入视频上工作的代码，并且可以使用 YouTube API 检测视频的结束，然后隐藏相关视频并在视频结束时再次显示视频的初始图像，那就太好了。

我使用 Wordpress gutemberg 经典编辑器来嵌入视频。如果我查看文章源代码...

<iframe width="853" height="450" src="//www.youtube.com/embed/Sft-fasbVnY" allowfullscreen="allowfullscreen"></iframe>

我有一个页面，其中有很多视频显示在更多页面上。 我无法为每个视频自定义嵌入代码，我正在寻找一个适用于所有视频的片段代码，就像一个插件，不需要向任何现有视频插入任何代码或元标记。

Answer 1

我认为以下内容可能有用：

function add_youtube_end_detect_script() {
    ?>
    <script>
    function onYouTubeIframeAPIReady() {
        var playerElements = document.querySelectorAll('iframe[src*="youtube.com/embed"]');
        for (var i = 0; i < playerElements.length; i++) {
            var player = new YT.Player(playerElements[i], {
                events: {
                    'onStateChange': function(event) {
                        if (event.data === YT.PlayerState.ENDED) {
                            event.target.classList.add('video-ended');
                        }
                    }
                }
            });
        }
    }

    var styles = document.createElement('style');
    styles.innerHTML = '.video-ended { pointer-events: none; }';
    document.head.appendChild(styles);
    </script>
    <?php
}
add_action('wp_footer', 'add_youtube_end_detect_script');

将此代码添加到 WordPress 主题的“functions.php”文件中