如何解决WordPress嵌入Vimeo视频全屏功能消失问题

问题 #

自2014年起使用WordPress，长期通过Vimeo嵌入视频，依赖「Classic Editor」插件使用经典编辑器（区块编辑器体验不佳）。近期嵌入视频时发现全屏选项消失，指定文章中的两个视频本该显示全屏按钮但未出现。

Vimeo提供的嵌入代码已明确包含全屏权限：allow="autoplay; fullscreen; picture-in-picture"
完整嵌入代码如下：

<div style="padding:100% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/886704254?badge=0&amp;autopause=0&amp;quality_selector=1&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Job 6 - Cannon Pinion Removal with Horotec Watch Hand Removing Press"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

经Vimeo客服提示，网站HTML中存在包含no-fullscreen-support类的代码片段，该类被怀疑是全屏功能失效的原因，可通过浏览器开发者工具搜索fullscreen定位该代码。

希望使用WordPress和Vimeo原生功能，避免大量自定义编码，但WordPress似乎会主动识别视频并禁用全屏选项，需找到禁用该特性的方法，确保Vimeo嵌入代码正常生效。

解决方案 #

1. 禁用WordPress的Vimeo oEmbed自动解析 #

WordPress的oEmbed功能会自动识别Vimeo链接并替换为内置播放器，这可能覆盖手动粘贴的嵌入代码。可通过以下方式禁用：

• 全局禁用oEmbed发现：将代码添加到主题的functions.php或使用代码片段插件：

add_filter('embed_oembed_discover', '__return_false');

• 仅禁用Vimeo的oEmbed：精准针对Vimeo关闭自动解析，避免影响其他平台：

function disable_vimeo_oembed($providers) {
    unset($providers['https://vimeo.com/*']);
    return $providers;
}
add_filter('oembed_providers', 'disable_vimeo_oembed');

2. 规范经典编辑器的代码粘贴方式 #

在经典编辑器中切换到「文本」模式，直接粘贴Vimeo的完整嵌入代码；若使用可视化模式粘贴，选择「粘贴为纯文本」，防止WordPress自动格式化或替换代码。

3. 动态移除no-fullscreen-support类 #

若上述方法无效，可通过JavaScript动态移除该类，恢复全屏功能：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.player.no-fullscreen-support').forEach(el => {
        el.classList.remove('no-fullscreen-support');
    });
});

将代码添加到主题的自定义JS区域（路径：外观>自定义>额外JS）。

4. 排查主题/插件冲突 #

临时切换到WordPress默认主题（如Twenty Twenty-Three），并禁用除Classic Editor外的所有插件，测试全屏功能是否恢复，以此排查是否由第三方主题或插件导致的冲突。

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