移动端怎么用视频做背景

Question

在pc端网页的登入界面能够正常显示,同时显示视频背景和登入框架。
可是如果在移动端中只能单独播放视频，想删掉也不行。
怎么解决

<v-container fluid bg fill-height grid-list-md text-xs-center>
    <video muted="muted" autoplay="autoplay" width="100%" loop style="position: fixed;right: 0px;bottom: 0px;min-width: 100%;min-height: 100%;">
      <source src="../../assets/videoplayback.mp4" type="video/mp4" />
    </video>
    <v-row class="h-100 w-100">
      <v-col class="d-flex justify-center align-center">
        <LoginCard
          :user="user"
          :text="text"
          @click="onsubmit"
        />
      </v-col>
    </v-row>

Answer 1

用 @media 单独处理一下呗。看上去你也没用响应式布局。

Answer 2

视频做背景没问题的，但移动端需要做特殊处理，因为移动端视频播放的时候层级很高，试着给video标签加上这些属性（不是都用，你自己组合一下），看能否达到你要的效果

webkit-playsinline="true" IOS下防止全屏播放
playsinline="true" 同上
x-webkit-airplay="true" 支持ios的AirPlay功能
x5-video-player-type="h5" 启用同层H5播放器
x5-video-player-fullscreen="true" 全屏设置
x5-video-orientation="portraint" 竖屏
style="object-fit:fill" 封面铺满