Background Video Not Extending to Edge

Solved
Highlighted
New Member
12 0 0

So I've put some custom CSS and html code into the Modular theme to create a looping background video that should display at full width and responsively size to the screen. The responsive sizing works great, but their are large margins all around the video and I can't figure out how to get rid of it. Anyone have ideas? Below is the CSS and HTML code I am using. 

 

HTML

<div class="video-bg">
<div class="video-wrap-bg">
<div id="video">
<video id="bgvid" autoplay="" loop="" muted="" playsinline="">
<source src="https://cdn.shopify.com/s/files/1/0434/0236/3044/files/12433453.mp4?v=1595269778">

</video>
</div>
</div>
<a class="video_emblem"><img src="https://cdn.shopify.com/s/files/1/0434/0236/3044/files/WP_round_logo_emblem.png?v=1596121755">
<br>
<br>
<span a="" href="https://cdn.shopify.com/s/files/1/0434/0236/3044/files/12433453.mp4?v=1595269778" target="popup" onclick="window.open('https://cdn.shopify.com/s/files/1/0434/0236/3044/files/12433453.mp4?v=1595269778','popup','width=600...'); return false;" class="button">Watch Full Video</span></a>
</div>

 

CSS

.video-bg {
position: relative;
width: 100%;
min-height: 100vh;
left: 0;
top: 0;
padding: 0, 0, 0, 0;
z-index: 0;
margin: 0, 0, 0, 0;
overflow: hidden;
}

 

/*--- Fixed Video Background iOS/Mobile Style--*/
.video-wrap-bg {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
z-index: -1000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('') no-repeat;
background-size: cover;
transition: 1s opacity;
}

 

0 Likes
Highlighted
Astronaut
1082 177 213

Hi,

Please send the URL to your website

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Highlighted
Astronaut
1082 177 213

This is an accepted solution.

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code

dantepw_0-1596503853795.png
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<style>
[id] .custom-html .container{
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
</style>

 


Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
12 0 0

That worked perfect for the left and right, but the video is still being cut off on the top. Any ideas for that? I tried adding some height modifications to the code you provided but it doesn't help. 

0 Likes
Highlighted
Astronaut
1082 177 213

Hey,

This is not related to the video's code, it's related to how your theme is setup: it is using a Parallax effect. Therefore only when the user scrolls the video shows "Not cut".

Double check your theme settings to see whether there is an option to deactivate parallax and it should fix your issue.

If the answer was helpful kindly click "accept as solution".

Thank you very much

Regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
12 0 0

I understand the parallax function, I guess I'm asking if there is a way to have the video extend all the way up to just below or even behind the navigation bar. I just don't want the big gap between the two. 

0 Likes