如何让我的背景视频全屏反应？

Question

我正在按照视频编写一个完全响应式网站，但我似乎无法像视频中那样使背景视频全屏显示，也许我缺少一行代码？您会在屏幕截图中看到底部有一个大的空白区域。我将在下面留下一些代码，希望能帮助找到问题。非常感谢！

\n

索引.js：

\n

return (\n    <HeroContainer>\n        <HeroBg>\n            <VideoBg autoPlay loop muted src={Video} type=\'video/mp4\' />\n        </HeroBg>\n        <HeroContent>\n            <HeroH1>Estudio Contable</HeroH1>\n            <HeroP>\n                Consult\xc3\xa1 por nuestros servicios.\n            </HeroP>\n            <HeroBtnWrapper>\n                <Button \n                    to=\'contactanos\' \n                    onMouseEnter={onHover} \n                    onMouseLeave={onHover}\n                    primary="true"\n                    dark="true"\n                >\n                    Contactanos {hover ? <ArrowForward /> : <ArrowRight />}\n                </Button>\n            </HeroBtnWrapper>\n        </HeroContent>\n    </HeroContainer>\n)\n}\n

\n

造型：

\n

export const HeroBg = styled.div`\nposition: absolute;\ntop: 0;\nright: 0;\nbottom: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%;\noverflow: hidden;\n`\nexport const VideoBg = styled.video`\nwidth: 100%;\nheight: 100%;\n-o-object-fit: cover;\nobject-fit: cover;\nbackground: #232a34;\n`\n

\n

\n

Answer 1

设置位置：固定，以及顶部和左侧属性。这将确保覆盖整个背景区域。

在你的情况下，这将在变量中VideoBg

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

来源： https: //css-tricks.com/full-page-background-video-styles/