How to rectify a very slow loading video in a React.js app – SEO

I have a fairly simple React app that has a looping video right at the top of the first ‘page’ when you open the app. I checked the entire app against many online testers and the video loads extremely slow.

So slow, it holds back the app from being able to have any SEO success. The video is 8.1 MB big with great quality so I don’t necessarily want to lose some of that quality. How can I improve load times for a video like this within a React application?

Video.jsx

import React from 'react';
import './styles.scss';
import { Row, Col } from 'react-bootstrap';
import video from '../../media/video.mp4';

export default class Hero extends React.Component {
  render() {
    return (
      <div className="hero">
        <video
          className="desktop-video"
          resizemode={"cover"}
          style={{
            aspectRatio: 1,
            width: "100%",
          }} autoPlay muted loop>
          <source src={video} type='video/mp4' />
        </video>
      </div>
    );
  }
}