WordPress站点Header视频移动端不显示的解决求助

1. 定位CSS控制规则 #

• 打开浏览器开发者工具（按F12），切换到移动端视图（点击设备图标），选中Header区域的视频元素或背景图元素。
• 在右侧Styles面板中，查找带有@media (max-width: 575px)的规则：
  • 找是否有隐藏视频的代码，比如.wp-custom-header-video { display: none; }或visibility: hidden;
  • 找是否有强制显示背景图的代码，比如.site-header { background-image: url(...) !important; }
• 查看这些CSS规则的来源文件（Styles面板里规则右侧的文件名+行号），可能是主题的style.css、自定义CSS面板（外观→自定义→额外CSS），或者某个插件的样式文件。

2. 修正CSS显示逻辑 #

• 如果找到移动端隐藏视频的规则，直接删除这条规则，或者把display: none;改为display: block;
• 如果背景图在移动端强制显示，在对应的@media规则里添加background-image: none;，覆盖原有背景图设置
• 注意：不要直接修改主题核心CSS文件，优先用子主题的style.css或后台的额外CSS面板添加自定义规则，避免主题更新丢失修改。

3. 补全JavaScript逻辑修正 #

• 之前修改的supportsVideo函数可能只是判断浏览器支持性，还要找主题中根据窗口宽度决定是否加载视频的逻辑：
  • 在wp-custom-header.js里搜索window.innerWidth或matchMedia相关代码，比如类似if (window.innerWidth > 575) { 加载视频 }的判断
  • 把宽度阈值调整为0，或者直接移除这个判断，让所有宽度下都加载视频
• 重要：修改主题核心JS文件前，一定要用子主题替代：
  1. 把修改后的wp-custom-header.js放到子主题的js文件夹
  2. 在子主题的functions.php中添加代码，替换原脚本：

     function replace_custom_header_script() {
         wp_deregister_script( 'wp-custom-header' );
         wp_enqueue_script( 'wp-custom-header', get_stylesheet_directory_uri() . '/js/wp-custom-header.js', array( 'jquery' ), false, true );
     }
     add_action( 'wp_enqueue_scripts', 'replace_custom_header_script', 20 );
     

4. 验证与调试 #

• 修改后刷新页面，用浏览器移动端视图和真实手机分别测试视频显示效果
• 如果视频仍被背景图遮挡，给视频元素添加z-index: 1;，背景图元素添加z-index: 0;，确保视频层级更高
• 检查控制台（F12→Console）是否有JS报错，排除脚本加载失败的问题

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