I need help getting a video loaded through custom section, width to be full screen for desktop

Store Design
, ,
1

Hello, I originally wanted a video with text overlay, so I made a custom liquid section and was able to get the text over the page. However the changes I made now will not display the video full screen. Please let me know if someone can help me adjust the width and height of the video.

Admin view

ronmoore_0-1686924924943.png
ronmoore_0-1686924924943.png1594×501 547 KB

User desktop view

ronmoore_1-1686924974771.png
ronmoore_1-1686924974771.png2542×408 95 KB

2

Here is the custom liquid code by section.

Your text goes here

Here is the custom CSS I have so far:

.video-container {
position: relative;
height: 500px;
max-width: 100%;
width: 100%;
}
.test {
position: relative;
height: 500px;
max-width: 100%;
width: 100%;
}
.video_text {
position: absolute;
z-index: 9999;
top: 20%;
font-size: 60px;
left: 35%;
padding: 10px;
.video-container {
position: relative;
height: 500px;
max-width: 100%;
width: 100%;
}
.test {
position: relative;
height: 500px;
max-width: 100%;
width: 100%;
}
.video_text {
position: absolute;
z-index: 9999;
top: 20%;
font-size: 60px;
left: 35%;
padding: 10px;