如何在Elementor中实现滚动触发画中画（PiP）视频模式？

一、添加并配置视频元素 #

• 在Elementor编辑器里拖入视频组件，支持原生媒体库视频、YouTube或Vimeo嵌入视频。
• 确认视频支持画中画：原生视频需保证浏览器兼容（主流Chrome、Firefox、Safari均支持）；第三方视频要使用支持PiP的嵌入链接。
• 给视频组件加自定义CSS类：在「高级」选项卡的「CSS类」中输入pip-trigger-video，方便后续JS定位元素。

二、编写滚动触发的自定义JavaScript #

通过监听滚动事件，判断视频是否离开视口，自动触发/退出PiP模式：

1. 打开Elementor的「自定义代码」面板（或主题的自定义JS编辑区），粘贴以下代码：

window.addEventListener('scroll', () => {
  const video = document.querySelector('.pip-trigger-video video');
  if (!video) return;

  const rect = video.getBoundingClientRect();
  const isOutOfViewport = rect.bottom < 0 || rect.top > window.innerHeight;

  // 视频离开视口且未开启PiP时触发
  if (isOutOfViewport && !document.pictureInPictureElement) {
    try {
      video.requestPictureInPicture();
    } catch (err) {
      console.error('PiP启动失败:', err);
    }
  } 
  // 视频回到视口且处于PiP状态时退出
  else if (!isOutOfViewport && document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
});

// 页面加载初始化
document.addEventListener('DOMContentLoaded', () => {
  const video = document.querySelector('.pip-trigger-video video');
  if (video) {
    video.setAttribute('playsinline', true);
  }
});

三、可选：自定义PiP窗口样式 #

如果需要调整画中画窗口的外观，添加以下自定义CSS：

/* 自定义PiP容器样式 */
::-webkit-picture-in-picture-container {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* 自定义PiP控制栏样式 */
::-webkit-picture-in-picture-controls {
  background-color: rgba(0,0,0,0.7);
}

四、兼容性与测试要点 #

• Safari浏览器要求用户先手动播放一次视频，之后才能自动触发PiP；
• 部分移动端浏览器PiP支持有限，可额外添加移动端适配逻辑（比如视频固定在页面底部）；
• 在主流浏览器中测试滚动触发效果，确保视频离开视口时自动弹出PiP，回到视口时自动关闭。

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