如何给WordPress子比主题添加首次访问全屏视频引导页（视频不重播 + 点击任意处立即出声 + 手机完美适配）

效果图

手机端

大家好，我是狐狸～

今天给我的博客 https://blog.qindiaos.cn/ 加了一个超级酷的功能：

首次访问本站时，自动弹出全屏视频引导页！

效果如下：

• 视频立即全屏播放（画面超美）
• 初始静音，保证一定能加载出来
• 点击页面任意空白处（或右下角按钮）→ 声音立即出来，视频继续正常播放，不重播
• 手机端自动隐藏所有按钮，保持干净
• 点击「立即进入我的博客」→ 慢慢淡出关闭，体验丝滑
• 仅首次访问显示，第二次及以后不再出现

下面分享完整实现方法（子比主题专用，3分钟搞定）。

准备工作

1. 准备好你的全屏视频（推荐 MP4，建议 1920×1080 以上）
2. 视频本身可以带声音（我这次用的是自带声音的版本）

步骤一：添加 CSS 样式

进入 子比主题设置 → 自定义代码 → 自定义 CSS 样式，删除旧 fox 代码，粘贴以下全部内容：

CSS

第二步：JS 代码（自定义 javascript 代码 → 删除旧代码 → 粘贴）

JavaScript

测试与使用

1. 保存后，用无痕模式打开你的博客
2. 视频立即全屏播放（静音）
3. 点击页面任意空白处或右下角按钮 → 声音立即出来，视频继续正常走
4. 手机端自动隐藏按钮，非常干净

想进一步美化？

• 把视频换成你自己的链接（修改 JS 中 src）
• 想改按钮颜色？告诉我你的主题主色，我立刻帮你调整
• 想去掉右下角按钮？告诉我，我马上给你纯点击空白出声版

狐狸的小窝欢迎每一位来访的朋友 ❤️