React 网站不只在 mozzilla 上显示视频

Question

我想在我的标题中的 div 上插入视频背景，它在我的本地服务器上工作。但是每当我将它部署在实时服务器中时，它就会变黑并显示

“DevTools 加载源地图失败：无法加载 chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map 的内容：系统错误：net::ERR_FILE_NOT_FOUND”

我尝试在我的 .htaccess 中添加 MIME 类型

我也尝试禁用 Javascript Source maps 和 CSS source maps 但 div 仍然是黑色的。因为我的视频和我代码中的每个媒体文件都在我的构建文件夹中。所以我不明白为什么它告诉我它不存在或找不到它。我还删除了最后一行 (//# sourceMappingURL=main.c0dd6000.js.map) 但它仍然没有按照此答案中的建议播放视频（我如何修复“DevTools 无法加载 SourceMap：无法加载内容“添加 JavaScript 库时出错？）不过，这里是代码：

import React from 'react';
import './header.css';

import Typewriter from 'typewriter-effect';
// ------------NEW STYLE----------------
import { Parallax, ParallaxBanner, ParallaxBannerLayer } from 'react-scroll-parallax';

import video_bg from '../../assets/bg_video1.mp4';
import textil from '../../assets/Guatemala/textil2.jpg';
import tree from '../../assets/Guatemala/tree.png';
import { Circle } from '../../icons';
import { CircleRings } from '../../icons';

const Header = () => {
  return (
    <>
    <div className='RO__header section__padding' >
      <div className='RO__header-content'>
        <h1 className='content_text-1'>
          I’m 
        </h1>
        <div className='content_text-effect'>
          
          <Typewriter 
            options={{
              strings: ['an Engineer', 'a Data Scientist', 'a Web Developer'],
              autoStart: true,
              loop: true,
            }}
          />
        </div>
        <h1 className='content_text-2'>
          here to help you turn your business into something greater
        </h1>
      </div>
    </div>
    <div className='RO__Parallax'>
      <div className='RO__Parallax_background'>
        {/* <ParallaxBanner 
          layers={[
            { image: textil, speed: -30}
          ]}>
        </ParallaxBanner> */}
        <video 
          src = {video_bg} autoPlay loop 
          className='RO__Parallax_foreground-video'/> 
      </div>
      <div className='RO__Parallax_foreground'>
        <ParallaxBanner 
        layers={[
          ,
          {
            speed: -15,
            children: (
              <div className='RO__Parallax_foreground-title'>
                  <h1>R A F A E L</h1>  
              </div>
            ),
          }
        ]}>
        </ParallaxBanner> 
        
      </div>
    </div>
    <div className='RO__Overlap'>
      <Parallax
        translateY={[-50, 50]}
        translateX={[-10, 90]}>
        <Circle className='RO__Overlap-Circle' />
      </Parallax>
      <Parallax 
        translateY={[-50, 50]}
        translateX={[10, -90]}
        rotate={[-360,0]}>
        <CircleRings className='RO__Overlap-circleRings' />
      </Parallax>
    </div>
    
    </>
  )
}

export default Header