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

[WillIFM]

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

[EcomGraduates]

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;
}