Video height Mobile view

Store Design
1

Hi, I inserted an autoplay video with custom liquid code mentioned below. The video is perfect in desktop version but in mobile version it is too small. I would like to zoom in the video to the aspect shown in attached picture. Please let me know how it can be done. Thanks!

Code used:

video { width: 100%; height: auto; display: block; margin: 0 auto; }

Below is the view right now

View right now
View right now543Ă—410 204 KB

Below is the zoomed in bigger view I would like to have

zoomed in view I would like to have
zoomed in view I would like to have385Ă—300 146 KB

2

Please attach a link to your store and what theme you are using.

3

Hi Columbus_Themes,

Thank you for your reply. The store’s link is https://urbantannery.com/ and I am using the Dawn theme.

4

Try this and let me know.

<style>
video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform: scale(1.35);
}
</style>
5

This code fixed the mobile view but at the same time made desktop view out of proportion.

I am using this code,

video { width: 100%; height: auto; display: block; margin: 0 auto; }

Can we add instructions in this code for modification in mobile view only?

6

@urbantannery , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width: 749px){
      [class*='custom_liquid']{
          overflow-x:hidden;
      }
    [class*='custom_liquid'] video{
        transform: scale(1.4);
        margin-bottom: 60px;
        margin-top: 50px;
    }
}

You can adjust the value as per your wish:

1.4 = zoom
60px = bottom margin
50px = top margin

Ideally you’d want to use a different video with the aspect ratio you wish though.

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

1 Like
7

Hi Diego_ezfy,

Amazing. It works like a charm. Thank you so much I replaced scale 1.4 with 1.35 and it is exactly what I wanted. Thanks again!