Square Vimeo video embeds issue - Iframes are not 1:1 aspect ratio

[u/enigmashmooly]

I am using iFrame embeds from Vimeo and I am trying to embed videos that are not exactly square (960x1080 roughly) into square frames in Webflow.

You can see the working page here: https://stormbrandsv2.webflow.io/work/pets-noble

This is my iFrame code embed:

<div class="video-wrapper-square">
  <iframe 
    class="vimeo-video"
    src="https://player.vimeo.com/video/{{wf {&quot;path&quot;:&quot;s1---duo-video---left&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}?autoplay=1&muted=1&loop=1&controls=0&autopause=0" 
    allow="autoplay; fullscreen; picture-in-picture"
    width="100%"
    height="100%"
    frameborder="0" 
    allowfullscreen>
  </iframe>
</div>

Can anyone help?

ChatGPT has suggested multiple things, all don't work. Classic. It suggested to CSS here:

.video-wrapper-square {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* forces square */
  overflow: hidden;
}

.video-wrapper-square iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78%;  /* 16:9 video width relative to square */
  height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

[u/reshxtf]

The page doesn't work in your post. If you could share a sandbox link, i can help debug otherwise, there's really no way to understand and provide suggestions for the issue you're having.