React website not showing video while live. Only works in Firefox

Question

I am trying to insert a video background on a div in my header and it works in my local server. But whenever I deploy it in the live server it goes black and shows

DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND

I have tried adding the MIME type in my .htaccess

As well I also tried to disable the JavaScript source maps and CSS source maps but the div is still black. Because my video is in my build folder with every media file in my code. So I do not understand why it's telling me that it does not exist or cannot find it. Also i removed the last line (//# sourceMappingURL=main.c0dd6000.js.map) but it's still not playing the video as suggested in this answer(How can I fix the "DevTools failed to load SourceMap: Could not load content" error when adding a JavaScript library?) Never the less, here is the code:

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