背景视频css（非全屏）

大家好！ 我有一个关于背景视频的问题，我把它附在整个页面上，但只需要把它嵌入顶部。谁能告诉我有什么问题吗？ 非常感谢！ HTML:

---

位置是固定的，因此它将固定到整个页面。使用

位置：绝对同时更改高度和宽度。
首先删除
最小宽度/高度：100%

比替换
转换：translateX（-50%）translateY（-50%）与
转换：translateX（-50%）仅水平移动元素

最后更改<代码>顶部：50%到<代码>顶部：0

如果您希望在滚动页面时也滚动视频，请将
位置：固定
替换为
位置：绝对


#bgvid{
背景：无#aaa！重要；
文本对齐：居中；
宽度：300px；
高度：150像素；
}
#bgvid{
位置：固定；
排名：0；
左：50%；
/*最小宽度：100%*/
/*最小高度：100%*/
-ms转换：translateX（-50%）；
-moz变换：translateX（-50%）；
-webkit转换：translateX（-50%）；
转化：translateX（-50%）；
z指数：-100；
背景：url（video bg.jpg）不重复；
背景尺寸：封面；
}
@媒体屏幕和屏幕（最大设备宽度：800px）{
html{
背景：url（video bg.jpg）#000无重复中心固定；
}
#bgvid{
显示：无；
}
}
这里的视频
需要在顶部嵌入吗？
<video autoplay loop poster="video-bg.jpg" id="bgvid">
    <source src="video-bg.webm" type="video/webm">
    <source src="video-bg.mp4" type="video/mp4">
</video>

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(video-bg.jpg) no-repeat;
    background-size: cover; 
}
@media screen and (max-device-width: 800px) {
    html {
         background: url(video-bg.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}