common BackgroundVideoWrapper.tsx

40% Statements 2/5

100% Branches 0/0

0% Functions 0/3

50% Lines 2/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37  
 
 
 
 
 
 
 
 
499x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
499x
 
 
 
 
 
 
 
 
 
  import React from "react";
import { styled, Box, BoxProps } from "@mui/material";
 
interface BackgroundVideoWrapperProps extends BoxProps {
  videoSrc: string;
  videoProps?: React.VideoHTMLAttributes<HTMLVideoElement>;
  sourceProps?: React.VideoHTMLAttributes<HTMLSourceElement>;
}
 
const BackgroundVideoWrapper = styled<React.FC<BackgroundVideoWrapperProps>>(
  ({ children, videoSrc, videoProps, sourceProps, ...rest }) => (
    <Box {...rest}>
      <StyledVideo autoPlay muted loop playsInline {...videoProps}>
        <source src={videoSrc} type="video/mp4" {...sourceProps} />
      </StyledVideo>
      <Box zIndex={1} position="relative">
        {children}
      </Box>
    </Box>
  ),
)(() => ({
  position: "relative",
  overflow: "hidden",
}));
export default BackgroundVideoWrapper;
 
const StyledVideo = styled("video")(() => ({
  overflow: "hidden",
  position: "absolute",
  width: "100%",
  height: "100%",
  objectFit: "cover",
  top: 0,
  left: 0,
  zIndex: 0,
}));