I want to create a ReactJS Hero component with a video for the background, but it doesn't work

Question

Hi i struggle creating a hero with a mp4 video on the background, when i put those code on a simple html/css folder it work, but not with react, i don't know why

HERE is my Hero component

import React from "react";
import Navbar from "../Navbar/Navbar";

function Hero() {
  return (
    <div className="image-hero">
      <Navbar />
      <section>
        <div className="video-container">
          <video autoPlay muted loop className="myVideo">
            <source src="gopro.mp4" type="video/mp4" />
          </video>
          <div className="text-hero">
            <h2>Da'Wave! Club</h2>
            <div className="p-hero">
              <p>
                A l'occasion de l'ouverture du site, inscris toi et profites
                d'avantage exclusif
              </p>
              <div className="button-hero">
                <button>Get Started</button>
                <button>Live Demo</button>
              </div>
            </div>
          </div>
        </div>
      </section>
      </div>
  );
}

export default Hero;

Hero is my App.css component

@font-face {
  src: url(font/Crimes\ Times\ Six.ttf);
  font-family: Crimes;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
  margin: 0;
  padding: 0;
}



.video-container {
  position: fixed;
  width: 100%;
  height: 10%;
  z-index: -1;
}

.myVideo {

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.navbar {

  display: flex;
  align-items: center;
  background: rgb(55,55,55);
background: linear-gradient(180deg, rgba(55,55,55,0.9808298319327731) 0%, rgba(54, 54, 54, 0.729) 50%, rgba(255,255,255,0) 100%);
  padding-bottom: 4rem;  
  font-family: 'Roboto', sans-serif;

}

.navbar-centre {
  display: flex;
  justify-content: center; /* Centre les éléments horizontalement */
  list-style: none; /* Supprime les puces des listes */
  padding: 0; /* Supprime le remplissage de la liste */
  margin: auto;
  gap: 1rem;

}



.navbar-centre a {
  text-decoration: none; /* Supprime le soulignement des liens */
  color: rgb(255, 255, 255);
}

.navbar-right {

  display: flex;
  justify-content: center; /* Centre les éléments horizontalement */
  list-style: none; /* Supprime les puces des listes */
  padding: 0; 
  gap: 1rem;

}



.text-hero {
  
  color: rgb(45, 211, 211);
  text-align: center;
  width: max-content;
  margin: auto;
  font-size: 8rem;
  font-size: 1.8rem;
  padding: 0 2rem;
}



.text-hero h2 {
  font-size: 8rem;

  font-family : Crimes;
  letter-spacing: 0.7rem;
  font-weight: 50;
  transform: rotate(-10deg);


}

.p-hero {

  background-color: rgba(0, 0, 0, 0.205);
  color: rgb(31, 139, 139);
  font-family: 'Roboto', sans-serif;
}


.button-hero button {

  background-color: #2a7081; /* Green */
  border: none;
  color: rgb(233, 233, 233);
  padding: 1rem ;
  margin: 0.4rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;

}

HERE is my Navbar component

import { NavLink } from "react-router-dom";

import "../../App.css";

const Navbar = () => {
  return (
    
    <nav className="navbar">
      
        <div className="logo"><NavLink to="/">Image</NavLink></div>
        
          <ul className="navbar-centre">
            <li>
              <NavLink to="/">Home</NavLink>
            </li>
            <li>
              <NavLink to="/blog">Blog</NavLink>
            </li>
            <li>
              <NavLink to="/projects">Projects</NavLink>
            </li>
            <li>
              <NavLink to="/about">About</NavLink>
            </li>
          </ul>

         
      
    </nav>
    
  )
};

export default Navbar;

I tried putting this css/htrml on a simple html folder and it work but changing those className by class etc ... and it work, but with react language it doesn't't work anymore

Answer 1

Importing your mp4 video first and then using that in the <source> element might do the trick.

Something like:

import myVideo from './myVideo.mp4'

and then

<source src={myVideo} type="type/mp4" />