How can I center a video and change the margin color on my website?

Hi, I am editing a video background banner for my website.

As shown in the picture above, I set the video’s width to 70%. Because, when it’s 100%, then the size of the video on the actual website looks different. The top and bottom are cut a bit. Anyway, when I reduce the width to 70%, the position of the video is on the left, not the center. I wanted to move it to the center, so I added code { margin: auto;}. it worked perfectly. It moves the video to the center. But at the same time, I have another problem. Even though I moved the video to the center, the margin blank is white. I want to change it’s color. According to Google, I can’t change the color of the margin, right?

Here is my question: How can I move that video to the center and then change the color in the blank?

My website: petimecanada.com

Thanks,

Hi @SHK I have looked into your store and 100% width video is looking good, If you need to color your margin you can add the background color property on the section and it will solve your issue.

If you can publish your changes on the site then I can provide you the exact code that will work for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

Hi @SHK ,

If you want to made like this

then here is the code

.videoBackground .videoBox {
    background: #ece6cc;
}

.videoBackground .fullscreen-video-wrap{
    position: absolute;
    left: 15%;
    min-width: 70%;
    width: 70%;
}

@media screen and (max-width: 767px){
.videoBackground .fullscreen-video-wrap {
    width: 100%;
    left: 0;
}
}
  1. Open customization

  2. Go to Video section

  3. Go to Custom CSS block

  4. Paste the above the code

  5. Save it and refresh

Hope this code will work.

But Video on full screen looking good on your website. I suggest not to change.

Best Regards

Team_OSC

Go to Online Store
2) Edit Code
3) Find theme.liquid file

  1. Add the following code in the bottom of the file above tag.
div#shopify-section-template--20648809464091__0b6db652-464d-4421-9177-3c25f51f2512 {
    display: flex;
    justify-content: center;
    background-color: #ece6cc;
}
.videoBox {
    width: 70%;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!