如何实现WordPress页面HTML5视频全屏时PayPal捐赠组件可点击

嘿，这个坑我之前帮不少人踩过！问题根源很简单：当HTML5视频进入全屏模式时，浏览器会把视频塞进一个专属的顶层全屏容器（可以通过document.fullscreenElement拿到），这个容器的层级比页面上所有普通DOM元素都高——你的PayPal组件看起来在视频上面，但实际上被这个全屏容器彻底挡住了，点击事件全被视频截走了。

给你三个实用的解决思路，按优先级排序：

方案1：让PayPal组件“跳”进全屏容器 #

这是最靠谱的方案，我们监听视频的全屏切换事件，当视频全屏时把PayPal组件移到全屏容器内部，退出时再放回原位：

// 先拿到你的视频元素和PayPal容器（记得替换成实际的选择器）
const videoEl = document.querySelector('video');
const paypalWidget = document.querySelector('#paypal-donation-container');
// 记录组件原来的父容器，方便退出全屏时还原
const originalParent = paypalWidget.parentElement;

// 监听全屏状态变化
videoEl.addEventListener('fullscreenchange', handleFullscreenChange);
// 兼容webkit内核浏览器（Chrome/Safari）
videoEl.addEventListener('webkitfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
  
  if (isFullscreen) {
    // 进入全屏：把PayPal组件加到全屏容器里
    isFullscreen.appendChild(paypalWidget);
    // 给组件设置绝对定位，固定到你想要的位置（比如右上角）
    paypalWidget.style.position = 'absolute';
    paypalWidget.style.top = '20px';
    paypalWidget.style.right = '20px';
    paypalWidget.style.zIndex = '9999'; // 确保在视频上层
    paypalWidget.style.pointerEvents = 'auto'; // 强制允许点击
  } else {
    // 退出全屏：把组件放回原来的父容器，恢复样式
    originalParent.appendChild(paypalWidget);
    paypalWidget.style.position = '';
    paypalWidget.style.top = '';
    paypalWidget.style.right = '';
    paypalWidget.style.zIndex = '';
  }
}

方案2：利用浏览器的视频控件overlay（兼容性稍差） #

部分现代浏览器支持在视频全屏时显示自定义控件层，你可以把PayPal组件放到这个overlay区域：

/* 针对WebKit内核浏览器隐藏默认播放按钮（可选） */
video::-webkit-media-controls-overlay-play-button {
  display: none;
}

/* 自定义全屏overlay层 */
.fullscreen-paypal-overlay {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  pointer-events: auto;
  /* 加上你原来的组件样式 */
}

然后配合方案1的事件监听，在全屏时显示这个overlay，退出时隐藏即可。

方案3：用iframe包裹PayPal组件（备选） #

如果前两个方案都不适用，试试把PayPal组件放进独立的iframe里——iframe的层级在全屏视频下更容易“突围”：

<iframe src="你的PayPal按钮独立页面地址" 
        style="position: fixed; top: 20px; right: 20px; z-index: 9999; width: 220px; height: 110px; border: none;"
        frameborder="0"></iframe>

注意：需要确保PayPal允许你把按钮嵌入iframe，可能要去PayPal后台检查一下设置。

最后提个小细节 #

检查一下你的PayPal组件有没有被设置pointer-events: none，这个CSS属性会直接让元素无法接收点击事件，排查的时候别忘了看这个！

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