移动友好的视频横幅

Question

我有一个带有 Video-Background 和 image-overlay + cta-button 的 React 组件。 由于视频使用自动播放和循环播放，因此我为移动设备添加了一个断点，并改为显示静态图像。

当我通过调整浏览器窗口的大小在我的桌面上模拟这个时 - 一切都按预期工作-

但在我的手机上，覆盖图显示在图像下方。

这是我的代码

    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>
    )
}