Dawm theme how adjust homepage background video high

[RichardYH]

To all the talents,

I used a Liquid code found online  to insert a background video to the main homepage, but now ran into the issue with the video is too tall and the viewers have to scroll down twice to pass the video and see the contents below.

I wasn't very familiar with the code editing and  couldn't figure it out how to adjust to make the video fit into to a regular browser resolution.

Any suggestions and helps are greatly appreciated!

The code used:

<style>
#wrapper {
position: relative;
display: inline-block;

}
#reel {

width: 100vw;
filter: brightness(30%);
}
.overlay {
position: absolute;
width: 40%;
left: 30%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>

<div id="wrapper">

<video playsinline autoplay muted loop id="reel">

<source src="https://cdn.shopify.com/videos/c/o/v/60423dbcdd2141f7b4e1bbbf55d47a97.mp4">

</video>

<img class="overlay" src="https://cdn.shopify.com/s/files/1/0806/9365/7915/files/Logo-Mainimage.png

">

</div>

 

[suyash1]

@RichardYH - can you please share this page link?

[RichardYH]

Thank you for step into this thread, here is the link to the shop and PS :
https://awakenairsoft.com/
Awaken1228!

[BSSCommerce-HDL]

Hi
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[RichardYH]

Thank you for step into this thread, here is the link to the shop and PS :
https://awakenairsoft.com/
Awaken1228!