Black bars at embedded video (magic padding?)

I’ve embedded a video (via Wistra - but same happens with vimeo) but I’m getting these black bars where the padding is "magic"ally added.
Does anyone know why they’re there/how to remove them?

The video is in a flex-box-div inside a section. The position is fine, it’s just these black bars that are absolutely uncalled for.

Thank you so much for your help!!


Here is my site Read-Only: LINK


Could you share a read-only link of your project please?

Sorry, of course!

https://preview.webflow.com/preview/serane?utm_medium=preview_link&utm_source=designer&utm_content=serane&preview=3688563fae7fd9c145dacfaa9a25fef3&pageId=62fab8bc65d8784def590d7b&workflow=preview

It must have to do with Wisitia, in my opinion.
Try to put the video on Youtube and this should fix the problem. YT and Vimeo are the most used in Webflow and probably the more maintained.

Okay, I’ve put the vimeo link back in, now the bars are grey.


Thanks, interesting. I have to analyse the output code, can you provide me the Webflow.io url of the staging?

Ok I get it, it’s the flexbox child settings that is making the video embed element to go crazy.

Easy way to fix it: Add a div alongside the video element. And make that div width 50%, like the video element is.
Now put the video element into that div. It solves your issue. You can now continue to design with more control over your layout.

1 Like