Re size a video

FOP
Explorer
114 0 17

Hello,

 

I am using DAWN theme and have a video on our home page, the video itself plays and is functional but it's just way too big. 

 

I have played around with the margin, but it doesn't do what I need it to do.  Essentially I need the video to be not as deep in width, it should be more of a banner.  It looks fine on the mobile site, just not the desktop.

 

here is the link to my site www.thefreedomofpeach.com.au

 

and the code I am using is 

<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline oncontextmenu="return false;" preload="auto" id="openthinkingvideo"><source src=mp4></video><style>#openthinkingvideo { display:block; max-width: 100%; width: 100%; padding: 0; margin: 0 }</style>

Replies 2 (2)

AnneLuo
Shopify Partner
604 121 124

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code to the head tag

<style>
  @media (min-width: 768px) {
    #openthinkingvideo {
      object-fit: cover !important;
      height: 450px;
    }
  }
</style>

 

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

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

FOP
Explorer
114 0 17

It works, but from what I can see on the desktop site, it cuts their heads off, so it doesn't resize it correctly.