Im trying to do this exact thing https://www.javycoffee.com/

CodePudding user response：

Your question is not clear.

• If you want to style a video to take fit an entire div, just give it "object-fit: cover". But if you want to keep aspect ratio when responsive then git it "object-fit: contain".

CodePudding user response：

Found a solution that gets me closest to my result. I put the video on its own page. Made it the page background image and then scaled it.

Keep it on its own page, dont use container and use max-height to scale it.

CSS

const StyledVideo = styled.video`
    filter: saturate(1.1) contrast(0.7) opacity(0.79) brightness(0.9);
    object-fit: cover;
    width: 100% !important;
    max-height: 600px !important;

`;


function Video() {
    return (
            <StyledVideo autoPlay muted loop id="myVideo">
                <source src={} type="video/mp4" />
            </StyledVideo>
    );
}

export default Video;