Embed video has mandatory top margin of 56%?

Tangible Blocks
#1

Hi all,

I want to display a URL from Loops and Logic via < Embed >< /Embed >; this works fine.

However, it comes with a gigantic top-margin of over 56%; where can I correct that? Changing it via CSS to a top-margin of 50px does NOT WORK:

.tangible-embed-dynamic tangible-dynamic-module {
padding-top: 50px !important;
}

This is what I see in my inspector:

<div class="tangible-embed-dynamic tangible-dynamic-module" data-tangible-dynamic-module="embed-dynamic" **style="padding-top: 56.2667%;**">
  <div class="avia-iframe-wrap" style="padding-bottom: 56.2667%;">
    <iframe title="RCVRY RUN Nijmegen met Miranda" width="1500" height="844" src="https://www.youtube.com/embed/XHrvUpPpa1o?feature=oembed&amp;wmode=opaque&amp;rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">
    </iframe>
  </div>
</div>

I hope you guys can help me, many thanks in advance!
Ita

#2

I was able to solve the problem using this CSS snippet:

.tangible-embed-dynamic.tangible-dynamic-module {
margin-top: -50% !important;
}

No idea if this is how it should be (compensate padding-top via margin-top) but for now it works.

#3

Hi Ita, I just tested that on a local site and had the same thing happen so it does seem to be a bug. I’ve reported this to the dev team so I’ll check back in here when that’s been addressed.

1 Like
#4

Hi Benjamin,

Thanks for the feedback! I hope the bug will be fixed soon!

#5

@IFRANL @benjamin I’m guessing this comes from trying to set a default 16/9 aspect ratio, but this is uaually done with padding-top, so the margin-top is weird.

But if you use the padding-top: 56.25% trick, that is how you can do the 16/9 aspect ratio (before aspect-ratio came along)

So because it’s a video and the margin was 56%, I don’t think that’s a coincidence…
Hope that points y’all in the right direction to fix it

#6

In that way, the percentage of 56 does sound very logical, yes! Thanks for your response, @zack !

@Benjamin, does this need to be completed towards the dev team?

#7

Not being a dev myself, I don’t have enough insight into how L&L works to know the exact nature of this issue, but just the fact that L&L’s embedding seems to work differently (and less well) than WordPress’ default embedding, I assume that’ll be something the devs will want to look at. I don’t have much info beyond that, but @Zack’s explanation about where this might be originating from does make sense! I’m mostly just the messenger on these forums so I’ll follow up here when I have more info about the issue and its resolution.