Shopify Question posted in
The Shopify help center can be found here.

How to make a responsive video banner without any top or bottom padding – Shopify

I would like to create a responsive video banner, and was able to insert the video, but after playing around with some css, could not remove the large padding that is above and below the html. I’m a beginner at coding, and have only been using tutorials to solve this issue.

This is for my Shopify website. The video itself is uploaded to Shopify (not a youtube video). I was able to get the video up and running, but there is a large amount of padding on the top and bottom of the video. However, on larger computers, this space is minimized. How can I make this responsive and have the video to be right up against the menu, with no padding above or below it (while being resized with different computer sizes).

Here is how the padding + video looks like in my website:

enter image description here

This is the code I currently use. Thanks in advance!

video {
  position: static;
  width: 100%;
  height: auto;
  padding-top: 0%;
  padding-left: 0%;
}
<video autoplay="" muted="" loop="" id="myVideo">
  <source src="https://cdn.shopify.com/s/files/1/0002/5441/0764/files/White_Back_2.mp4?1958" type="video/mp4">
</video>
Tags:

2

Answers


  1. 0

    I am going to work with what you gave us, so hopefully this can help. To have no padding above or below, use this:

    video {
   padding-top: 0;
   padding-bottom: 0;
}

    As a test I made a small page to demonstrate.

    <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 0;
        }
        video {
            position: static;
            width: 100%;
            height: auto;
            padding-top: 0;
            padding-bottom: 0;
        }
    </style>
</head>
<body>
    <div style="width: 100%; height: 50px; background-color: black"></div>
    <video autoplay="" muted="" loop="" id="myVideo">
        <source src="https://cdn.shopify.com/s/files/1/0002/5441/0764/files/White_Back_2.mp4?1958" type="video/mp4">
    </video>
</body>
</html>

    This produces the desired results of having it right against the object above (In this case just a plain div). I also tested it with Google Chrome’s dev tools on different devices and the expected result remains. If this does not work, then something else in your application is likely causing the issue

    Login or Signup to reply.
  2. 0

    The trick to fix that is to add a wrapper and give it a percentage top or bottom padding. Here’s the original article on the technique.

    .vidWrap {
    position: relative;
    padding-top: 56.25%; /* 16x9 aspect ratio */
    max-width: 100%;
    height: 0;
}
.vidWrap.xwide {
    padding-top: 26%;
}
.vidWrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

    <div class="vidWrap xwide">
    <video autoplay="" muted="" loop="" id="myVideo">
        <source src="https://cdn.shopify.com/s/files/1/0002/5441/0764/files/White_Back_2.mp4?1958" type="video/mp4">
    </video>
</div> <!-- /.vidWrap.xwide -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search