White line under video

[KickLocker]

I'm using a custom css video with a shop button on my homepage. It works perfectly on a desktop but when viewed on mobile you can see a white line under the video before the next header.

Here's the code i'm using for the video. What do I need to change to remove the white line in the screenshot below?

<div class="overlaybutton">

  <a href="https://www.kicklocker.co.uk/collections/frontpage">Shop </a>

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

    <source src="https://cdn.shopify.com/videos/c/o/v/d7d7a9cae9c34d09a90b14e9cd970c7b.mov" type="video/mp4">

    <source src="https://cdn.shopify.com/videos/c/o/v/d7d7a9cae9c34d09a90b14e9cd970c7b.mov" type="video/mp4">

  </video>

</div>

<style>

.overlaybutton video{

width: 100%;

height: auto;

display: block;

margin: 0 auto;

}

.overlaybutton{

position: relative;

}

.overlaybutton::after{

top: 0%;

left: 0%;

position: absolute;

background: rgba(255,255,255,0.2);

z-index: 5;

content:https://www.kicklocker.co.uk/collections/frontpage;

display: block;

height: 100%;

width: 100%;

}

.overlaybutton a{

top: 50%;

left: 50%;

position: absolute;

padding: 10px 15px;

font-size: 16px;

color: #ffffff;

background: #000000;

border-radius: 10px;

line-height: 20px;

z-index: 1;

text-decoration: none;

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}

</style>

[Sweans · Accepted solution]

Hi @KickLocker,

To remove whiteline under video, follow these steps:

1.Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Find your theme and click on Customize.

4.Click Actions > Edit code.

5.In the left sidebar, under the Layout directory, select base.css.

6.Paste the following code and save

@media screen and (max-width: 989px) {
.multicolumn .page-width{
    margin-top: -1px !important;
}
}

Result:-

I hope this helps! If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,

Sweans

[KickLocker]

Thank you that worked!

[KickLocker]

Also thought i'd share... was struggling with another issue around the video not autoplaying on an iPhone if its in low power mode. There isn't a full solution but there is a workaround.

If you add this code to your theme.liquid near the bottom before the </body> tag, then if the device is in low power mode, once the user touches anywhere on the screen or scrolls the video will autoplay and stay playing.

<script>
        Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
          get: function () {
          return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
          }
        });
        
        document.body.addEventListener("click", playVideoOnLowPower);
        document.body.addEventListener("touchstart", playVideoOnLowPower);
      
        function playVideoOnLowPower(){
          try{
          const videoElements = document.querySelectorAll("video");
          for (i = 0; i < videoElements.length; i++) {
            if (videoElements[i].playing) {
            } else {
            videoElements[i].play();
            }
          }
          }
          catch(err) {
          console.log(err);
          }
        }
    </script>