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>
