解决微信浏览器video全屏的问题及黑边问题

最新推荐文章于 2025-05-09 12:17:19 发布

原创最新推荐文章于 2025-05-09 12:17:19 发布 · 2.3w 阅读

5 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了解决在微信中播放视频时遇到的上下黑边无法全屏问题的方法。通过调整CSS样式中的object-fit属性为fill来实现真正的全屏播放效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是苹果和安卓在微信上的效果图：
这里写图片描述

<video src="./mp4/v1.mp4" x5-video-player-type="h5"  id="player" height="100%" width="100%" webkit-playsinline playsinline x5-playsinline x5-video-player-fullscreen="true">
                    your browser does not support the video tag
                </video>

还有个问题，在android的微信里面，就算加上了上面的属性，还会出现上下有黑边，不能全屏的问题。所以需要设置：object-fit: fill

#player{
                position: absolute;
                z-index: 1;
                margin: 0;
                padding: 0;
                object-fit: fill;
            }