Video is overextending over other section areas

Store Design
, ,
1

Hello There!

I am a total code noob. however, I have managed to implement a video section into the theme But i am facing an issue with video size. Whenever the position is set to fixed i get the fullscreen view that i want but over extends as a background to all other sections which i dont want. and when i set the position to absolute or fixed, the video becomes much smaller than the section box.

Here is the my website:

www.theskinconcept.co

Below is the code i’ve been experimenting with:

.videoBackground {

height: 100vh;

position: relative;

}

.videoBackground .fullscreen-video-wrap {

position: absolute;

top: 0;

left: 0;

min-width: 100%;

width: 100%;

height: 100%;

overflow: hidden;

}

.videoBackground .fullscreen-video-wrap .video-js {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

max-width: 100%;
max-height: 100%;

}

.videoBackground .fullscreen-video-wrap video {

min-height: 100%;

min-width: 100%;

object-fit: cover;

}

2

@TheSkinConcept

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.videoBackground .fullscreen-video-wrap .video-js {
  position: absolute;
}
.videoBackground .fullscreen-video-wrap{
    height: 100vh;

}
3

Thank you for the support. You are a life saver!