如图是一个个人主页展示,有一个介绍视频,视频上有个视频封面,在主页是显示正常,显示图片及代码片段如下

<video direction="0" bindfullscreenchange="fullScreenChange" controls="{{managerVideoPlaying}}" bindplay="videoPlay" bindended="videoEnded" show-play-btn="{{managerVideoPlaying}}" show-fullscreen-btn="{{managerVideoPlaying}}" show-center-play-btn="{{false}}" id="managerVideo" object-fit="contain" src="{{managerInfo.voideurl}}">

<cover-view wx:if="{{!managerVideoPlaying}}" class="videoPoster" @tap="managerVideo">

<cover-image wx:if="{{managerInfo.videocover}}" class="coverPoster" src="{{managerInfo.videocover}}"></cover-image>

</cover-view>

</video>

问题:将此主页转发给微信好友后,出现页面显示错乱,如下图:

想请问下大家是否有知道原因的?因为video默认层级最高?有知道的伙伴麻烦说说解决办法,感激不尽!!