Html 如何将视频设置为页面一半的背景

我想知道你是否可以将视频背景设置为主页屏幕的一半

我目前正在使用Bootstrap4的网格系统来分离页面和html5来设置视频

<div class="container-fluid">
    <div class="row">
        <div id="leftcontainer" class="col-md-6">
            <div id="video">
                <video class"video-fluid z-depth-1" autoplay loop muted width="100%">
                    <source src="videos/backgroundVid2.mp4" type="video/mp4" />
                </video> 
                <button>Download Brochure</button>
                <button>Contact Us</button>
            </div>
        </div>
    </div>
</div>

下载小册子
联系我们

---

当我运行代码时，我得到的视频无法正确放入容器中，并且对屏幕大小的变化没有响应。

我无法真正读出您想要的内容，但这是一个关于使用youtube视频（它没有显示，我假设它被阻止）的响应性的工作小提琴：

下载小册子
联系我们

我想你可以这样做

如果你给我们提供CSS以及Javascript，那么我们将帮助你更多

资料来源：

//获取视频
var video=document.getElementById（“myVideo”）；
//扣上按钮
var btn=document.getElementById（“myBtn”）；
//暂停并播放视频，然后更改按钮文本
函数myFunction（）{
如果（视频暂停）{
video.play（）；
btn.innerHTML=“暂停”；
}否则{
video.pause（）；
btn.innerHTML=“播放”；
}
}

/*设置视频样式：100%宽度和高度覆盖整个窗口*/
#我的视频{
位置：固定；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
}
/*在视频/页面底部添加一些内容*/
.内容{
位置：固定；
底部：0；
背景：rgba（0,0,0,0.5）；
颜色：#f1f1；
宽度：100%；
填充：20px；
}
/*设置用于暂停/播放视频的按钮的样式*/
#myBtn{
宽度：200px；
字号：18px；
填充：10px；
边界：无；
背景：#000；
颜色：#fff；
光标：指针；
}
#myBtn：悬停{
背景：ddd；
颜色：黑色；
}

标题
同侧眼线

暂停

欢迎来到StackOverflow。请编辑您的问题，显示您的CSS，并生成一个工作示例。谢谢