Dawm theme how adjust homepage background video high

RichardYH
Shopify Partner
3 0 0

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>




Screenshot 2024-05-13 at 5.36.55 PM.png

Replies 4 (4)

suyash1
Shopify Partner
9308 1155 1495

@RichardYH - can you please share this page link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
RichardYH
Shopify Partner
3 0 0

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

BSSTech-Venture
Shopify Expert
518 144 168

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

RichardYH
Shopify Partner
3 0 0

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