Блог

У меня есть компонент React с видео-фоном и наложением изображения cta-кнопка. Поскольку в видео используется автозапуск и цикл, я включил точку останова для мобильных устройств и вместо этого показал статическое изображение.

Когда я имитирую это на своем рабочем столе, изменяя размер окна браузера, все работает так, как нужно-

но на моем телефоне наложение отображается под изображением.

Это мой код

     import React, {useState} from "react";
import {Box, Button, CardMedia, Container, Fade, Grid, makeStyles, useMediaQuery, useTheme} from "@material-ui/core";
import {Video} from "./Video";

const useStyles = makeStyles(theme => ({
    overlay: {
        width: 'fill-available',
        height: 'fill-available',
        margin: 0,
        display: 'flex',
        alignItems: "center",
        position: "absolute",
        top: 0,
    },
    overlayText: {
        color: theme.palette.info.contrastText,
        textAlign: "center"
    },
    overlayContainer: {
        position: "relative",
    }
}))

export const BackgroundVideo = (props) => {

    const [loading, setLoading] = useState(true);
    const theme = useTheme();
    const matches = useMediaQuery(theme.breakpoints.up('sm'));


    const {src, image} = props;
    const styles = useStyles();

    return (
        <Box className={styles.overlayContainer}>
            {
                matches ?
                    <Video src={src} setLoading={setLoading}/> :
                    <CardMedia image='/Video/MSM-1024x576.jpg' component='img'/>
            }
            <Box className={styles.overlay}>
                <Container className={styles.overlayText}>
                    <Fade in={true} timeout={8000}>
                        <Grid container spacing={5}>
                            <Grid item xs={3}/>
                            <Grid item xs={6}>
                                <CardMedia component={'img'} image={image}/>
                            </Grid>
                            <Grid item xs={3}/>
                            <Grid item xs={12}>
                                <Button variant={"contained"} color={"primary"}>mehr erfahren</Button>
                            </Grid>
                        </Grid>
                    </Fade>
                </Container>
            </Box>
        </Box>
    )
}