Javascript 视频不会显示在传单地图的顶部

我尝试使用html插入视频元素，代码如下：

您的浏览器不支持
视频
元素。

当我单独运行它时，上面的方法是有效的，但当我尝试将它插入到我的传单地图顶部时，它就是这样显示的

---

什么可能导致透明显示？

代码中的某些内容出错，正如您看到的，下面的示例工作正常。我添加了与您相同的视频

/**
*简单地图
*/
//配置图
让配置={
minZoom:7，
maxZomm:18，
};
//地图开始时的放大率
常数缩放=18；
//坐标
常数lat=52.2297700；
常数lon=21.0117800；
//呼叫地图
const map=L.map（'map'，config.）.setView（[lat，lon]，zoom）；
//用于在地图上加载和显示平铺层
//大多数磁贴服务器都需要属性，您可以在“图层”下设置属性`
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）
*{
保证金：0；
填充：0
}
html{
身高：100%
}
身体，
html，
#地图{
身高：100%；
保证金：0；
填充：0
}
录像带{
位置：绝对位置；
排名：0；
z指数：9999；
}

您的浏览器不支持
视频
元素。
code在这里运行时效果很好，但是如果我尝试在JSFIDLE上运行它，视频会显示为黑色。我也尝试在我的IDE（webstorm）上运行它，但地图不会显示在背景中，只有左上角的视频。显然，我做了一些我不在乎的错事，这只是一个网站，并不总是运作良好。它在您的环境中运行良好是很重要的。问题也发生在codepen.io上，console.log显示
https://v2v.cc/~j/theora_testsuite/320x240.ogg net:：ERR_TOO_MANY_重定向
此文件和重定向有问题。但在本地，这个例子对我来说很好，问题似乎是视频窗口出现在地图后面。这里有一个剪报：。现在的问题是如何将视频元素放在前面？将代码添加到github上或github上，并在此处链接。不幸的是，没有代码，几乎没有机会获得帮助。我用一个不同的文件准备了一个工作示例