How to fix home page video sizing issue on mobile view?

Technical Q&A
,
1

Hi guys,

In my home page, in the section called “Shop by category” has 4 categories with auto-play videos. It looks fine when I use desktop, but when I use mobile, the videos sizing is not current and not in the center. In the mobile I can only see half of the video.

Would anyone help me with that? I have post the source theme code that may related to this part.

Here is the link to the store: https://kawaiibabydiapers.com/

Best

@media only screen and (max-width:768px){

.background-media-text__video{
    width:300%;
    left:-100%
    justify-content: center;

}
  }

.background-media-text__video iframe,.background-media-text__video video{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    pointer-events:none
  }

@media only screen and (min-width:769px){

.background-media-text__video iframe,.background-media-text__video video{
      height:120%;
      max-width:none;
      left:-100%;
      height:150%;
      width:300%
  }
    }

@media screen and (min-width:1140px){

.background-media-text__video iframe,.background-media-text__video video{
      width:100%;
      height:300%;
      left:auto;
      top:-100%
  }
    }

.video-interactable .background-media-text__video iframe,.video-interactable .background-media-text__video video{
    pointer-events:auto;
  }