在移动设备上，ReactJS 背景视频（样式化的组件）会跳转到全屏，您必须将其滑开才能将其移除。你如何解决这个问题？

Posted 2023-03-06

【中文标题】在移动设备上，ReactJS 背景视频（样式化的组件）会跳转到全屏，您必须将其滑开才能将其移除。你如何解决这个问题？

【英文标题】：On mobile, ReactJS background video (styled components) jumps to the full screen and you have to swipe it away to remove it. How do you fix this?

【发布时间】：2021-12-17 09:01:55

【问题描述】：

我在移动设备上遇到了这个问题，在页面加载后视频会缩放到全屏，然后我必须将其滑开才能看到网站。我以此为例，但我的代码类似：https://qdync.csb.app/（基于此 repo：https://github.com/SmashTapsOS/reactjs-videobg）

对于我的代码，我使用了样式化组件，这就是 index.js 代码 sn-p 在视频背景中的样子：

<HeroBackground>
  <VideoBackground 
    autoPlay 
    loop 
    muted 
    src=Video 
    type='video/mp4'
    allowFullScreen
    allowfullscreen='true'
    playsInLine
    controls=false
  >
  </VideoBackground>
</HeroBackground>

但是，当页面在移动设备上加载时，视频会跳到前面并在我的手机上全屏显示（就像是 Netflix 视频一样），而不是将视频图像显示为移动设备上的背景图像.

有一个关于此的 GitHub 帖子，您需要 autoPlay loop muted playsInLine 才能使其工作：Adding a background video with React?

任何想法如何让这个在移动设备上不跳转到全屏模式？但是，它在桌面（非移动）版本上是 1000% 完美的。只是那个讨厌的移动版本弄乱了视频。

【参考方案1】：

你可以加style= WebkitMediaControls: 'display(none)'