Html 从左上角css发布视频

在我的网站上，如果加载了视频，我想用视频替换背景图像（封面）。我还想使用flex，视频的表现应该像图像一样，这意味着它可以达到100vh。我的意图是用pug/jade和sass（如果你看一下代码的话）来编写这个网站

如果将其设置为100vh，则视频位置从左下角开始，而图像位置从左上角开始

如果我将高度设置为100%，而不是100vh，效果很好，但是如果我缩放窗口，背景图像有时会更大，您可以在底部看到它

有没有办法解决这个问题？（是的，最后的js脚本不起作用-idk为什么）

以下是网站：

谢谢你的帮助

html（哈巴狗/翡翠）：

doctype html
html
head
    meta(charset="utf-8")
    title Heinz Höpfner - Facereader
    meta(name="viewport" content="width=device-width,initial-scale=1")
    link(rel="stylesheet" href="css/reset.css")
    link(rel="stylesheet" href="css/styles.css")
    link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,700")
    script(src='js/jquery.js' type='text/javascript')

body
    header.large
        nav
            img(src="img/navlogo.png" alt="navlogo")
            ul
                li: a(href="#") About
                li: a(href="#") Facereading
                li: a(href="#") Seminare
                li: a(href="#") Referenzen

    .vidbg      
        video(autoplay loop)
            source(src="img/ani/bg.webm" type="video/webm")
            source(src="img/ani/bg.mp4" type="video/mp4")

    .welcome
        img(src="img/logo.png" alt="logo")

    script(type='text/javascript').
        $(document).on("scroll",funtion(){
            if($(document).scrollTop()>200){
                $("header").removeClass("large").addClass("small");
            } else{
                $("header").removeClass("small").addClass("large");
            }
        });

html, body
margin: 0

header
  background: rgba(255,255,255,0)
  width: 100%
  position: fixed
  z-index: 999
  .large
    font-size: 24px
  nav
    width: 960px
    margin: 0 auto
    height: 80px
    display: flex
    justify-content: flex-end
    align-items: center
      img
        height: 35px
        margin-top: 10px
        margin-bottom: 10px
        display: none
      ul
        display: flex
  a
    color: rgba(255,255,255,0.8)
    text-decoration: none
    font-family: Lato
    text-transform: uppercase
    font-size: 24px
    font-weight: 100
  a.active, a:hover
    color: #ffcc00
  li
    margin-right: 30px
  .large
    height: 250px
    img
      margin-top: 80px
      height: 180px
      margin-left: 218px
    li
      display: none
    .logotitle
      font-size: 52px
      padding-top: 124px
      font-family: Lato
      position: fixed
      padding-left: 16px
  .small
    height: 200px
    background: rgba(0,0,0,0.9)
    border-bottom: 1px solid #000
    img
      height: 40px
      margin-top: 5px
    li
      margin-top: 17px
header,nav, a, img, li
  transition: all 1s

.vidbg
  position: absolute
  width: 100%
  height: 100vh
  overflow: hidden
  video
    object-fit: cover
    width: 100%
    height: 100vh

.welcome
  height: 100vh
  background-image: url(../img/bg.png)
  background-size: cover
  margin-bottom: 50px

  display: flex
  flex-direction: column
  align-items: flex-end
  justify-content: space-around

  img
    height: 125px
    margin-right: 7%
    z-index: 100

p
  width: 600px
  margin: 0 auto 20px
  font-family: Lato

css（sass）：

doctype html
html
head
    meta(charset="utf-8")
    title Heinz Höpfner - Facereader
    meta(name="viewport" content="width=device-width,initial-scale=1")
    link(rel="stylesheet" href="css/reset.css")
    link(rel="stylesheet" href="css/styles.css")
    link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,700")
    script(src='js/jquery.js' type='text/javascript')

body
    header.large
        nav
            img(src="img/navlogo.png" alt="navlogo")
            ul
                li: a(href="#") About
                li: a(href="#") Facereading
                li: a(href="#") Seminare
                li: a(href="#") Referenzen

    .vidbg      
        video(autoplay loop)
            source(src="img/ani/bg.webm" type="video/webm")
            source(src="img/ani/bg.mp4" type="video/mp4")

    .welcome
        img(src="img/logo.png" alt="logo")

    script(type='text/javascript').
        $(document).on("scroll",funtion(){
            if($(document).scrollTop()>200){
                $("header").removeClass("large").addClass("small");
            } else{
                $("header").removeClass("small").addClass("large");
            }
        });

html, body
margin: 0

header
  background: rgba(255,255,255,0)
  width: 100%
  position: fixed
  z-index: 999
  .large
    font-size: 24px
  nav
    width: 960px
    margin: 0 auto
    height: 80px
    display: flex
    justify-content: flex-end
    align-items: center
      img
        height: 35px
        margin-top: 10px
        margin-bottom: 10px
        display: none
      ul
        display: flex
  a
    color: rgba(255,255,255,0.8)
    text-decoration: none
    font-family: Lato
    text-transform: uppercase
    font-size: 24px
    font-weight: 100
  a.active, a:hover
    color: #ffcc00
  li
    margin-right: 30px
  .large
    height: 250px
    img
      margin-top: 80px
      height: 180px
      margin-left: 218px
    li
      display: none
    .logotitle
      font-size: 52px
      padding-top: 124px
      font-family: Lato
      position: fixed
      padding-left: 16px
  .small
    height: 200px
    background: rgba(0,0,0,0.9)
    border-bottom: 1px solid #000
    img
      height: 40px
      margin-top: 5px
    li
      margin-top: 17px
header,nav, a, img, li
  transition: all 1s

.vidbg
  position: absolute
  width: 100%
  height: 100vh
  overflow: hidden
  video
    object-fit: cover
    width: 100%
    height: 100vh

.welcome
  height: 100vh
  background-image: url(../img/bg.png)
  background-size: cover
  margin-bottom: 50px

  display: flex
  flex-direction: column
  align-items: flex-end
  justify-content: space-around

  img
    height: 125px
    margin-right: 7%
    z-index: 100

p
  width: 600px
  margin: 0 auto 20px
  font-family: Lato

---

如果您不能通过css修复它，请尝试jQuery

---

如果您不能通过css修复它，请尝试jQuery

---

不，这不是我想要的，但我找到了解决办法。我必须添加对象位置：左0px；身高：100%；在css中添加到视频。就是这样。不，这不是我想要的，但我找到了解决办法。我必须添加对象位置：左0px；身高：100%；在css中添加到视频。就这样。