我制作了第一个网站，遇到了一些自己无法解决的问题
该网站是Bootstrap 4。
https://jsfiddle.net/NUJ88/cn2bdrw1/<--我的导航
1：我的主要问题是与IE和Edge(可能还有Firefox(的兼容性。Chrome中一切正常。
当我在IE11中打开它时，导航下拉菜单无法锁定目标，点击时不会保持打开状态。我该如何解决此问题？
2：我的第二个问题是全屏html5视频功能，它不会在IE11或Edge上显示。
HTML:
<video autoplay muted loop id="homeVideo">
<source src="./local-source-mp4-file" type="video/mp4"; codecs="H.264/MPEG-4">
Your browser does not support HTML5 video.
</video>
CSS：
#homeVideo {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
z-index: -100;
这将完成任务。css具有响应能力，因此视频在所有屏幕格式上都保持16:9的比例。不可能有全宽和全高，因为视频是16:9，而许多屏幕不是。
如果您不支持早于版本25的Opera，则可以删除type="video/ogg"行。所有现代浏览器都支持type="video/mp4"。
注意，<video>标签中的width="320" height="180"什么都不做。css设置宽度和响应高度。
<video>的造型很糟糕。例如，不可能更改图标、更改按钮形状等。对于syling，需要一个Javascript播放器，lik jPlayerhttp://jplayer.org
尝试将视频自动执行到全屏(如视频播放器上的全屏按钮(是不可能的。即使使用Javascript"requestFullscreen"方法，也会导致错误Video API can only be initiated by a user gesture。换句话说，全屏只能由网站访问者通过html中的按钮启动。
<body>
<div class="videoContainer">
<video width="320" height="180" autoplay controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</body>
用这个css在所有屏幕格式上保持16:9的比例
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.videoContainer {
display: block;
width: 100%; /* width of video */
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.videoContainer::before {
display: block;
content: "";
padding-top: 56.25%; /* keep 16:9 ratio */
}
.videoContainer video {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}