I want the mp4 video to be full width and cover the sides

Store Design
, , ,
1

Hi,
I put a video with autoplay and loop but it does not cover the entire width. I have different videos for mobile and desktop so the solution has to work for both. I would love it if i can put some opacity to it and add text at the bottom of the video just like how i can if it was an image. I would highly appreciate if I can get some help with this.
Here is my website: www.barakatbazaar.com

Screenshot 2024-08-17 152829.png
Screenshot 2024-08-17 152829.png1899×823 259 KB

Kind Regards,
Ibrahim W.

2

Hi @IbrahimW

Try to add this CSS in your theme code → base.css or theme.css

.mp4-video .container-fluid {
    padding: 0;
}

.mp4-video .container-fluid .mx-auto {
    max-width: 100% !important;
}

If this solution helps you, kindly like this reply and mark it as a solution. If you need an expert Shopify developer for customization and development, feel free to contact me via email or WhatsApp.

1 Like
3

It worked.
Thanks!
Would it be possible for you to help add little opacity on the videos and add text at the bottom?

4

Sorry this does not work for mobile version.

5

Hi @IbrahimW
Sorry to hear that add this CSS also with the others I will help for mobile

.mp4-video .container {
    max-width: 100%;
    padding: 0;
}