Video creating unwanted spaces

Store Design

Topic summary

A Shopify store owner is experiencing unwanted spacing issues when displaying a Vimeo video embed, but only in mobile view. Desktop display appears normal.

Attempted Solutions:

  • User tried various custom CSS codes without success
  • A helper suggested centering the iframe using style="width: 100%" modification to the embed code

Current Status:

  • The proposed solution resulted in a CSS syntax error when added to the theme’s mobile view page
  • Error message: “Unknown word” at line 1:1
  • Issue remains unresolved; user is requesting further guidance on how to properly implement the fix
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I was wondering if someone can help me. I have added a video to shopify and unwanted spaces showing in mobile view only. I am guessing if I paste a CSS custom code it will remove this but have tried several, unfortunately unsuccessful. Video attached.

Embed code:

2

Hi @LOFTROBE ,

Let try this one. It can be centered.

<iframe title="vimeo-player" style="width: 100%;" src="https://player.vimeo.com/video/979057092?h=bf52d33e1e" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>

Mobile

BSSCommerceTC_0-1720977490063.png
BSSCommerceTC_0-1720977490063.png478×792 86.4 KB

Desktop:

BSSCommerceTC_1-1720977536608.png
BSSCommerceTC_1-1720977536608.png1367×791 75.7 KB

3

Hi,

Thanks for looking into this. I tried adding this to mobile view on actual page, theme box.

Unfortunately, an error message popped up.

Path: Subject page in themes mobile view.

Error: CssSyntax Error: Unknown word (1:1)

Please advise.

Thanks

Steph