Vimeo Video Embed Issue: Embedded video not displaying at proper size

Store Design
,

Topic summary

A user is experiencing sizing and positioning issues when embedding a 1:1 aspect ratio (1080x1080) Vimeo video into a Shopify product page. While the video displays correctly in the product description editor, it renders much smaller with pillarboxing (black bars on sides) on the published page. Additionally, there’s unwanted space above the video where it should appear, with the smaller video being “pushed” below this space.

Proposed Solution:
A respondent suggests this occurs because Shopify applies default max-width constraints and overrides iframe styling. The recommended fix involves:

  • Wrapping the Vimeo iframe in a custom div with class “custom-video-wrapper”
  • Adding CSS that uses padding-bottom: 100% to maintain the 1:1 aspect ratio
  • Positioning the iframe absolutely within the wrapper to fill the container properly

Status: The issue remains unresolved pending implementation of the suggested CSS solution. Screenshots were provided showing the discrepancy between editor preview and published page.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello

I am embedding a vimeo video into my product listing and having an issue with the way it is placing and sizing the video on the Shopify product page.

When I place the Vimeo embed code into the Shopify product description box the video is rendered exactly as intended - 1:1 aspect 1080x1080 - However once I publish/preview the page the video is rendered much smaller and with a pillarboxing effect - It is worth noting that when you publish the page you will notice there is a space above the embedded video where the 1080x1080 video should appear but the smaller video is “pushed” below.

Thank you in advance for any help regarding this issue

Here is a link to the product page with the issue:

https://inveniofineminerals.com/products/tourmaline-brazil-3

I have also included a couple of pictures

Screenshot 2025-02-15 at 10.47.42 AM.png
Screenshot 2025-02-15 at 10.47.42 AM.png1238×1142 131 KB

Screenshot 2025-02-15 at 10.48.58 AM.png
Screenshot 2025-02-15 at 10.48.58 AM.png1150×1662 69.5 KB

2

By default, Shopify may apply max-width constraints or override iframe styling, which causes your Vimeo embed to appear with pillarboxing (extra padding) and not retain its full intended size.

Replace your Vimeo embed code with this modified version,


  <iframe src="https://player.vimeo.com/video/YOUR_VIDEO_ID" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="">
  </iframe>

Replace YOUR_VIDEO_ID with your actual Vimeo video ID

then add css

.custom-video-wrapper {
  position: relative;
  padding-bottom: 100%; /* 1:1 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-top: 1rem;
}

.custom-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}