如何在Safari 11中禁用内嵌Vimeo视频的画中画按钮

阿华AIGC实验室

2026-5-19

如何禁用Safari中嵌入Vimeo视频的画中画按钮

好问题！针对你遇到的Safari浏览器里Vimeo嵌入视频显示画中画（PiP）按钮，但Chrome/Firefox里没有的情况，这里有几个靠谱的解决方案，你可以逐个尝试：

1. 使用Vimeo嵌入参数直接禁用

Vimeo的播放器支持通过URL参数来控制功能，你可以在嵌入视频的src地址末尾添加?pip=0来禁用画中画按钮。比如：

<iframe src="https://player.vimeo.com/video/你的视频ID?pip=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

注意：如果你的URL已经带有其他参数，记得用&来连接，比如?autoplay=1&pip=0。这个方法是最直接的，优先推荐测试。

2. 用CSS针对Safari隐藏按钮

如果参数方法不生效，你可以尝试通过CSS来隐藏Safari专属的画中画按钮。由于Safari的媒体控件属于浏览器原生元素，需要用webkit前缀的选择器：

/* 隐藏Safari中Vimeo播放器的画中画按钮 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  iframe[src*="vimeo.com"]::-webkit-media-controls-picture-in-picture-button {
    display: none !important;
  }
}

如果Vimeo播放器用了Shadow DOM封装控件，可能需要调整选择器（比如使用::part），不过这个写法在大多数情况下能覆盖原生的画中画按钮。

3. 通过Vimeo Player API控制

如果上面两种方法都不行，可以借助Vimeo的JavaScript Player API来精确控制播放器选项：
首先，引入Vimeo的Player SDK：

<script src="https://player.vimeo.com/api/player.js"></script>

然后初始化播放器并禁用画中画：

// 替换成你的iframe元素ID
const player = new Vimeo.Player('vimeo-player');

player.setOptions({
  pip: false
}).catch(error => {
  console.log('禁用画中画失败:', error);
});

这个方法需要确保你正确引入了SDK，并且播放器元素有对应的ID。