Video like a background React - html

I have a problem with setting video like a background. As you can see on picture, when I scroll at the bottom, my video is not ending before footer. It's displaying also after the footer. Image
Here is the part of code were I placed my video and btw, this video like a background needs to be only on this page.
return (
<>
<video src={videoBackground} autoPlay muted></video>
<Container style={{ padding: 0, margin: 0 }}>
<WrapperPage>
<WrapperContainer>
<Container maxWidth="sm">
<Box
sx={{
maxWidth: "100%",
my: 3,
textAlign: "center",
}}
>
<h1>
<div
className="wordSize animate__animated animate__bounceInDown"
style={{ fontSize: "6rem" }}
>
Blokaria
</div>
<div
className="animate__animated animate__bounceInUp wordSize"
style={{ fontSize: "2.5rem" }}
>
<div>Where we create unique value</div>
</div>
</h1>
<Typography></Typography>
</Box>
</Container>
{staniIbarVodo ? showData : ""}
<Container maxWidth="sm" sx={{ mt: 5, mb: 5, textAlign: "center" }}>
<Grid container spacing={4} direction="row" sx={{ my: 3 }}>
<Grid item xs={12} md={6}>
<Typography variant="h6" align="center" sx={{ mb: 2 }}>
{t("how-to-create-qr-code")}
</Typography>
<YoutubeEmbed embedId="1cz9q9OQ6Kg" />
<Typography component="legend">User reviews</Typography>
<Rating name="read-only" value={5} readOnly />
</Grid>
<Grid item xs={12} md={6}>
<Typography variant="h6" align="center" sx={{ mb: 2 }}>
{t("howToCreateNft")}
</Typography>
<YoutubeEmbed embedId="aYuXCImLVPQ" />
<Typography component="legend">User reviews</Typography>
<Rating name="read-only" value={4} readOnly />
</Grid>
</Grid>
</Container>
</WrapperContainer>
</WrapperPage>
</Container>
<video src={videoBackground} autoPlay muted></video>
</>
);
Here is the CSS:
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
I really don't know what is the problem and if someone knows the solution, please help. Thank you!
Also I tried to set some static picture for background and everything is okay but this video makes me problem.

Related

How to implement custom layout to the css and make it responsiveness?

I'm trying to make the pages responsive, Here is the code I have tried.
Code:
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
display: 'flex',
flexDirection: 'column',
alignItems: "center",
overflow: "hidden",
overflowY: "scroll",
}}
>
<Grid
container
direction="column"
alignItems="center"
>
<Grid item sx={{mt: 8, mb:7}}>
<CardMedia
component="img"
image="logo.png"
alt="logo"
sx={{
width: { xs: '80%', sm: '80%', md: '100%', lg: '100%', xl: '100%' }
}}
style={{ margin: '0 auto' }}
/>
</Grid>
</Grid>
<Grid container justifyContent="center">
<Grid item xs={11} sm={8} md={6} lg={5} xl={3.5}>
<Card
sx={{
backgroundColor: 'white',
borderRadius: '6px'
}}
>
<Box
sx={{mt:4, mb:5, mx:4}}
>
<Box>
<Stack
direction={"row"}
spacing={3}
>
<CardMedia>...</CardMedia>
<Box
sx={{wordWrap: "break-word", overflow: "hidden"}}
>
<Typography>
......
</Typography>
<Typography>
......
</Typography>
<Chip>...</Chip>
</Box>
</Stack>
</Box>
</Box>
</Card>
</Grid>
</Grid>
<Stack
direction="row"
alignItems="center"
justifyContent="center"
spacing={{xs: 3, sm: 4}}
sx={{ mt: 3, mb: 3 }}
>
<Button
variant="contained"
>
Button1
</Button>
<Button
variant="contained"
>
Button2
</Button>
</Stack>
</Box>
The question is how can I make my code conform to the figma specification? and it still be responsive. I'm so confused about how to add top: 188px, left: 653px those parameter to the mui Box or should I use percentage?
This is the figma layout.

How to fix badge position in menu header React with ant design

im trying to put an element Badge to the right of header menu in my page, but I don't know how do that, currently de Menu element of ant design push to another position the badge (bell icon):
The code:
const HeaderComp = (props) => {
let navigation = useNavigate()
const root= AppConfig.BucciaratiRoot.length>0 ? "/"+AppConfig.BucciaratiRoot:"/"
return (
<Layout>
<Header className="header" style={{position:'fixed', zIndex: 1, width: '100%'}}>
<div style={{float:'left', marginRight:'5%'}}>
<img style={{width: 120, height:31}} src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"/>
</div>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} >
<Menu.Item key="1" onClick={()=>navigation(root)}>Home</Menu.Item>
<Menu.Item key="3">About</Menu.Item>
</Menu>
<div style={{float:'right', marginLeft:'5%'}}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</Header>
</Layout>
)
}
How cain I put the badge to the right of the header menu ?
You can use flex instead of float, and then but every element you want to be at the right in a div and every element to the left in another div, and using some justify-content:"space-between" property in flex you can make the space left in the navbar to be in between those to divs.
See more on FlexBox
your code should look like:
return (
<Layout>
<Header
className='header'
style={{
position: "fixed",
zIndex: 1,
width: "100%",
display: "flex", // make the header flex
justifyContent: "space-between", // put all the space between the left and right sections of the menu
}}
>
<div className='header-left'>
{/* The left side of the menu */}
<div style={{ /* remove float */ marginRight: "5%" }}>
<img
style={{ width: 120, height: 31 }}
src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png'
/>
</div>
<Menu
theme='dark'
mode='horizontal'
defaultSelectedKeys={["1"]}
>
<Menu.Item key='1' onClick={() => navigation(root)}>
Home
</Menu.Item>
<Menu.Item key='3'>About</Menu.Item>
</Menu>
</div>
<div className='header-right'>
{/* The right side of the menu */}
<div style={{ /* remove float */ marginLeft: "5%" }}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</div>
</Header>
</Layout>
);
<Layout>
<Header
className="header"
style={{
position: 'fixed',
zIndex: 1,
width: '100%',
display: 'flex',
justifyContent: 'space-between',
}}
>
<div>
<div style={{ marginRight: '5%' }}>
<img
style={{ width: 120, height: 31 }}
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"
/>
</div>
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
<Menu.Item key="1" onClick={() => navigation(root)}>
Home
</Menu.Item>
<Menu.Item key="3">About</Menu.Item>
</Menu>
</div>
<div style={{ marginLeft: '5%' }}>
<Badge dot>
<BellOutlined />
</Badge>
</div>
</Header>
</Layout>;

CSS / React Help - position text infront of image

I'm using an image and trying to position some text in front of the image and center, as seen in the screenshot from my design below:
I'm using the below code and found out how to layer the text over the top with z-index, but I'm wondering how I can center the text inside the parent div as seen in the design?
Code:
<div style={{ display: `flex`, flexDirection: `column` }}>
{/* image and title */}
<div>
<StaticImage
src="../images/home.png"
width={1000}
quality={100}
formats={["auto", "webp", "avif"]}
alt="home image"
style={{ marginBottom: `1rem`, zIndex: `1` }}
/>
<div style={{
position: `absolute`,
top: `50%`,
left: `50%`,
transform: `translate(-50%, -50%)`,
zIndex: `2`,
display: `flex`,
justifyContent: `spaceBetween`,
flexDirection: `row`
}}>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Gareth</h1>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Veale</h1>
</div>
</div>
</div>
However, this gives me the text centered on the entire page i think? Perhaps due to the 50% top/left properties?
you should set a width to the parent div to see the difference in flex alignment.
See the code below.
<div style={{ display: `flex`, flexDirection: `column` }}>
{/* image and title */}
<div>
<StaticImage
src="../images/home.png"
width={1000}
quality={100}
formats={["auto", "webp", "avif"]}
alt="home image"
style={{ marginBottom: `1rem`, zIndex: `1` }}
/>
<div style={{
position: `absolute`,
top: `50%`,
left: `10%`,
width: `80%`,
transform: `translate(-50%, -50%)`,
zIndex: `2`,
display: `flex`,
justifyContent: `spaceBetween`,
flexDirection: `row`
}}>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Gareth</h1>
<h1 style={{
color: `white`,
fontSize: `7vw`
}}>Veale</h1>
</div>
</div>
As you can see i just changed the left and width parameters to get the expected result. I hope this will solve your problem

Some grid items grows up compared to other due to different size content

I have a problem building an UI.
I'm trying to copy this mockup found on dribbble.
I'm using React with Material UI and this is why I'm stuck:
I should have a kind of card with defined height (because there is another card of same height aside) with a first section of icon, title and a subtitle. Under this line it should be a grid layout with 2 rows and 3 columns that should define 6 equal containers with undefined and variable height and width and that's it
this is how my layout is shown at this point.
Now I should add the images of payment methods and I would like that it will behave like container remain of it's width and height and the image resizes and scale to fill the container (keeping its ratio) but when I try to add the images the MUI item grow to fit the content (image) growing its height. If you look at the last image you can see that the 1st row of the items is higher than the 2nd one. How can I fix that keeping the responsive layout?
Thank you all folks in advance.
Here is my code:
<Grid container md={5} xs={12} lg={6}
style={{
backgroundColor: "purple",
padding: 20,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<Grid container xs={12} md={10} lg={10}
style={{
backgroundColor: "grey",
padding: 20
}}>
<Grid item xs={3} lg={3}
style={{
height: 120,
padding: 10,
backgroundColor: "black"
}}>
<div style={{ height: "100%", backgroundColor: "grey" }} />
{/* today I'm so beautiful (: */}
</Grid>
<Grid item xs={9} lg={9}
style={{
height: 120,
padding: 10,
backgroundColor: "black"
}}>
<div style={{ height: "100%", backgroundColor: "red" }} />
</Grid>
</Grid>
<Grid container xs={12} lg={10}
style={{
height: 200,
backgroundColor: "green",
padding: 5,
}}>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard}>
<img src={paypal} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard}>
<img src={visa} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard} >
<img src={mastercard} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard} >
<img src={wise} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard}>
<img src={stripe} style={styles.imgResponsive2} />
</div>
</Grid>
<Grid item xs={6} lg={4} style={styles.paymentCardContainer}>
<div style={styles.paymentCard} >
<img src={payoneer} style={styles.imgResponsive2} />
</div>
</Grid>
</Grid>
</Grid>
And here's the style:
const styles = {
imgResponsive1: {
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "red",
padding: 20,
overflow: "hidden",
},
imgResponsive2: {
width: "100%",
height: "auto",
},
imgResponsive3: {
width: "100%",
height: "auto",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
center: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
paymentCardContainer: {
padding: 10,
backgroundColor: "blue"
},
paymentCard: {
height: "100%",
backgroundColor: "red",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
}

Screen scrolling getting stuck for React / Material UI

So I am encountering a weird issue where when I am on mobile scrolling on my website gets sticky, as in sometimes it lets you scroll and others it doesn't. Cant seem to figure out why, no console errors or anything like that. Included below code for just a few of the sub grid components but I have 9, they're all identical. Written in react with material-ui.
What I think the issue is is the DOM loading just a few of the grid items, then loading more and the scroll taking time to adjust. Although what leads me to question that is when you scroll to the bottom, the same issue happens even though nothing has changed in the state.
This is hosted on firebase at https://brightspotblog-26d91.web.app/ if you would like to see the issue for yourselves.
return (
<div className="App">
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: "100vh", overflowX: "hidden"}}
>
<StarfieldAnimation
style={{
position: "absolute",
width: "100%",
height: "100vh",
zIndex: -10,
}}
/>
<Typography variant="h3" color="primary" style={{ padding: 25}} align="center">
The Final Frontier
</Typography>
<Grid
container
item
md={9}
spacing={5}
alignItems="center"
direction="row"
>
<Grid item md={4}>
<Card
variant="outlined"
style={{ backgroundColor: "transparent", borderColor: "white" }}
>
<CardContent>
<Typography variant="h4" color="primary">
Mercury
</Typography>
<Typography color="primary">Terrestrial Planet</Typography>
<Typography variant="body2" color="primary" component="p">
Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets.
</Typography>
</CardContent>
<CardActions>
<Avatar alt="Mercury" src={Mercury} />
<div style={{ flex: 1 }} />
<Button color="primary" variant="outlined" >
Learn More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item md={4}>
<Card
variant="outlined"
style={{ backgroundColor: "transparent", borderColor: "white" }}
>
<CardContent>
<Typography variant="h4" color="primary">
Venus
</Typography>
<Typography color="primary">Terrestrial Planet</Typography>
<Typography variant="body2" color="primary" component="p">
Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. It is the second-brightest natural object in the night sky after Moon.
</Typography>
</CardContent>
<CardActions>
<Avatar alt="Venus" src={Venus}/>
<div style={{ flex: 1 }} />
<Button color="primary" variant="outlined" size="small">
Learn More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item md={4}>
<Card
variant="outlined"
style={{ backgroundColor: "transparent", borderColor: "white" }}
>
<CardContent>
<Typography variant="h4" color="primary">
Earth
</Typography>
<Typography color="primary">Terrestrial Planet</Typography>
<Typography variant="body2" color="primary" component="p">
Earth is the third planet from the Sun and the only astronomical object known to harbor life. Earth formed over 4.5 billion years ago.
</Typography>
</CardContent>
<CardActions>
<Avatar alt="Earth" src={Earth} />
<div style={{ flex: 1 }} />
<Button color="primary" variant="outlined" size="small">
Learn More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item md={4}>
<Card
variant="outlined"
style={{ backgroundColor: "transparent", borderColor: "white" }}
>
<CardContent>
<Typography variant="h4" color="primary">
Mars
</Typography>
<Typography color="primary">Terrestrial Planet</Typography>
<Typography variant="body2" color="primary" component="p">
Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, larger than only Mercury.
</Typography>
</CardContent>
<CardActions>
<Avatar alt="Mars" src={Mars} />
<div style={{ flex: 1 }} />
<Button color="primary" variant="outlined" size="small">
Learn More
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Grid>
</div>
);
try the following:
html,
body {
width: 100%;
margin: 0;
padding: 0;
}
in your app.css or a global stylesheet. I know I've run into this issue a couple of times with material ui