亲测可用，解决WordPress视频背景无法在微信端播放问题

 

实现效果

首页添加视频

添加html代码，并将视频上传到媒体库，或CDN，复制视频地址，替换第5行的mp4网址

<video autoplay="" muted="" loop="" id="video" x5-video-player-type="h5"
x5-video-player-fullscreen="" x5-video-orientation="portraint" x-webkit-airplay=""
webkit-playsinline="" playsinline="" x5-playsinline="" class="background-video"
draggable="true" style=" width:100%; ">
    <source src="http://cai.caiqi.run/wp-content/uploads/2025/01/Home.mp4"
    type="video/mp4">
</video>

使用场景：仅在首页加载

将以下代码添加到您的当前启用主题的 functions.php 文件中

// 首页加载视频，手机微信查看生效
function load_custom_script_on_homepage() {
    if (is_home()) { // 检查当前页面是否是首页
        wp_enqueue_script('jweixin', '//res2.wx.qq.com/open/js/jweixin-1.6.0.js', array(), null, true);
    }
}
add_action('wp_enqueue_scripts', 'load_custom_script_on_homepage');


function add_custom_js_to_homepage() {
    if (is_home()) { // 仅在首页显示
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const video = document.getElementById('video');

                if (video) {
                    video.play().catch(err => {
                        console.log("Autoplay failed:", err);
                    });
                }

                document.addEventListener('WeixinJSBridgeReady', function() {
                    if (video) {
                        video.play().catch(err => {
                            console.log("WeixinJSBridgeReady play failed:", err);
                        });
                    }
                }, false);
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_custom_js_to_homepage');

[/wppay]

可能遇到的问题

视频下方有白色填充，可以对视频的包裹层添加CSS，可以根据实际视频的高度，修改200px，为合适的视频高度。

将以下代码添加到您的当前启用主题的 style.css 文件中

@media screen and (max-width: 768px) { 
    .home-video-m{
        height: 200px;
    }
}