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

Store Design
1

스크린샷 2023-11-28 235249.png
스크린샷 2023-11-28 235249.png1564×869 178 KB

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,

2

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

3

Hi @SHK ,

If you want to made like this

Screenshot 2023-11-29.png
Screenshot 2023-11-29.png1906×907 212 KB

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

4

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!