Having an issue with my video background not playing; instead, it just shows a static image. I've checked the return statement for the video tag and I'm confident that the folder path (../image/) is correct.
I've followed various guidelines from different websites, but all I get is the image of the video, not the actual video playing.
I've excluded most of the React functional component above due to code length restrictions on Stack Overflow. However, all components and functionalities are working as intended.
import Video1 from '../image/Video1.mp4';
return (
<div id='container'>
<video playsinline autoplay muted loop id="myVideo">
<source src={Video1} type="video/mp4" />
</video>
<ExpansionView expansion={expansion} selectExpansion={setExpansion}/>
<p>current state of Naxxramas is {expansion['Naxxramas'].toString()}</p>
<DisplayView data={allCards} expansion={expansion}/>
{/* test */}
</div>
);
}
export default Container;
Here is the CSS:
#myVideo {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}