Html 两个背景视频在同一环境下表现不同<；视频>；标签

我有两个在线视频，其中两个表现不同。 “兔子视频”位于导航的顶部，“太空视频”位于导航的黑色背景下（我并没有设置）

是什么原因造成的？我在本地尝试过，并将格式更改为webm，但没有成功

   <video id="background-video" loop autoplay muted>

      // "bunny video"
     // http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4
      // "space video"
      // http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1

// I switch those two links here:
      <source src="http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1" type="video/mp4" />

    </video>

//“兔子视频”
// http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4
//“空间视频”
// http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1
//我在这里切换这两个链接：

---

codepen上的演示：

这两个视频对我来说表现相同，都是1280x720分辨率-然而，“大巴克兔”以16:9高宽比呈现并填充视频帧，而空间剪辑以16:9字母框显示（视频中烘焙了黑条），因为它以更宽的高宽比呈现

所以，你的导航没有黑色背景-它实际上是视频的一部分。明白我的意思吗

---

这两个视频对我来说表现相同，都是1280x720分辨率-但是，“大公兔”以16:9的高宽比呈现并填充视频帧，而空间剪辑则以16:9的字母框显示（在视频中烘焙黑条），因为它以更宽的高宽比呈现

所以，你的导航没有黑色背景-它实际上是视频的一部分。明白我的意思吗

---

在这两种情况下，导航都应该在视频前面。黑色文本在黑色背景中消失。在这两种情况下，导航都应该在视频前面。黑色文本在黑色背景中消失。