WordPress视频全屏状态下如何显示暂停时出现的捐赠按钮？

这个问题我之前帮客户解决过——本质是浏览器全屏模式会把视频塞进一个独立的顶层容器，你原来的捐赠按钮不在这个容器里，所以默认看不到。下面是一步步的解决方案，亲测在WordPress里有效：

第一步：完善HTML结构 #

先给你的捐赠按钮加上明确的ID，同时确保视频的ID（你已经设了myVideo）能正常获取。调整后的代码大概是这样：

<div style="width: 50%; float: left; position:relative;">
    <h6>请确保至少完整观看一次视频，这样您就能充分体验这项强效理疗技术的所有益处</h6>
    [video width="640" height="360" mp4="http://theposturesaver.com/wp-content/uploads/2018/03/Bretching.mp4" id="myVideo"][/video]
    <!-- 捐赠按钮，默认隐藏 -->
    <div id="donateBtn" style="display:none; position:absolute; padding:12px 20px; background:#e74c3c; color:white; border-radius:4px; cursor:pointer; z-index:9999;">
        点击捐赠支持我们
    </div>
</div>

给外层容器加position:relative是为了让按钮在非全屏时能相对视频定位。

第二步：添加JavaScript监听逻辑 #

你可以把这段代码放到WordPress的「自定义HTML」区块里，或者通过主题的「自定义脚本」功能添加（推荐用子主题避免更新丢失）：

document.addEventListener('DOMContentLoaded', function() {
    const video = document.getElementById('myVideo');
    const donateBtn = document.getElementById('donateBtn');
    let isFullscreen = false;
    const originalParent = donateBtn.parentElement;

    // 视频暂停时显示按钮，播放时隐藏
    video.addEventListener('pause', () => {
        donateBtn.style.display = 'block';
        // 如果当前是全屏状态，把按钮移到全屏容器里
        if (isFullscreen) {
            const fullscreenContainer = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
            if (fullscreenContainer) {
                fullscreenContainer.appendChild(donateBtn);
                // 把按钮固定在全屏右下角
                donateBtn.style.bottom = '25px';
                donateBtn.style.right = '25px';
                donateBtn.style.top = 'auto';
                donateBtn.style.left = 'auto';
            }
        }
    });

    video.addEventListener('play', () => {
        donateBtn.style.display = 'none';
    });

    // 监听全屏切换事件，兼容不同浏览器
    ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange'].forEach(eventName => {
        document.addEventListener(eventName, handleFullscreenToggle);
    });

    function handleFullscreenToggle() {
        isFullscreen = !isFullscreen;
        if (isFullscreen) {
            // 进入全屏时，如果视频是暂停状态，同步移动按钮
            if (video.paused) {
                const fullscreenContainer = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
                fullscreenContainer.appendChild(donateBtn);
                donateBtn.style.bottom = '25px';
                donateBtn.style.right = '25px';
            }
        } else {
            // 退出全屏时，把按钮移回原容器
            originalParent.appendChild(donateBtn);
            // 恢复非全屏时的定位（可根据需求调整）
            donateBtn.style.bottom = 'auto';
            donateBtn.style.right = 'auto';
            donateBtn.style.top = '10px';
            donateBtn.style.left = '10px';
        }
    }
});

第三步：适配与调试 #

• 不同浏览器的全屏API有前缀，代码里已经做了兼容处理；
• 你可以根据需求修改按钮的样式（颜色、大小、位置），只要保证z-index足够高就行；
• 如果用了缓存插件，记得清理缓存再测试效果。

内容的提问来源于stack exchange，提问作者Lucky