javascript - 背景视频不会在Chrome中显示

我通过vid.ly在我的作品集的第一页中添加了背景视频标题。它可以在移动设备上正常播放。但是，当我尝试在Chrome笔记本电脑上打开该视频时，该视频无法显示。
https://mcnamarakc.github.io/kathleenmcnamara/

如果我有chrome开发工具打开并刷新页面，则视频将顺利通过。

<video style="display: none" id="toggleDisplayFire" playsinline="playsinline"
    autoplay="autoplay" muted="muted"loop="loop">
    <source src="https://vid.ly/7f4q4w" type="video/mp4">
</video>

 $(document).ready(function () {
   $('#toggleDisplayFire').show();
 });

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

开发工具目前没有显示错误，尽管有时我会遇到跨域读取阻止（CORB）错误。视频应在页面加载时开始播放，并且还有一个onclick功能可在2种不同的视频背景之间切换。

我愿意以其他方式托管视频，但是由于视频文件很大，我还没有找到其他解决方案！感谢您的帮助！！

最佳答案

请试试这个

 <video style="display: none" id="toggleDisplayFire" playsinline="playsinline" autoplay="autoplay" muted="muted"
    loop="loop">
    <source src="https://d3fenhwk93s16g.cloudfront.net/7f4q4w/webm_480.webm?t=15629361515d28835787bda" type="video/mp4">
</video>

您正在放置vid.ly播放器的视频链接，因此我已将该链接替换为实际的视频链接。