Jump to content

Videos doesn't resize properly on narrow screens

Recommended Posts

Hi, 

I am having a issue with the responsiveness of videos on my squarespace site.

This is my site: 

https://eh-test.squarespace.com/case_thecigar

Password: Test19site

 

The video blocks on the site, doesn't seem to scale the same way, the image blocks do on narrow screen sizes. See the attached screenshot for reference.

image.thumb.png.d1bb6f2e26c0259fd15f302d1265f4e0.png

 

This is what it is supposed to look like:

 

image.thumb.png.203b229bb69458cf0907b18a51f99656.png

When editing the site, it seems the videos doesn't fill the entire block. These videos are added using code, but the same thing seems to happen with normal video blocks.

This is the code I am using:

<video style="width: 100%"
  autoplay loop muted playsinline 
  src="https://static1.squarespace.com/static/634ffc57ffdf0754b5b42989/t/637b6808e2b010736bb6ae04/1669031961613/Multiform+Design+element2+%E2%80%93+2000x1334.mp4">
    <source type="video/mp4" src="https://static1.squarespace.com/static/634ffc57ffdf0754b5b42989/t/637b6808e2b010736bb6ae04/1669031961613/Multiform+Design+element2+%E2%80%93+2000x1334.mp4">
  <body oncontextmenu="return false;">
</video>

 

Does anyone know how to solve this issue? 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Videos tend to keep a 16:9 radio, if you mimic that with an image that has a ratio of 16:9 and have it set to fit rather than fill (and set to align top) you should get closer to matching up the two blocks.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.