HTML Embed not working?

Hey guys,

My HTML Embed code to add a video is not working when I publish the site, although it works for the other videos I have in place. I had some code on the site I added as an embed months ago that is still there.

However when I add some new code to an embed this week, it doesn’t work.

Here’s the code:

<div><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><figure style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%; margin-block-end: 0; margin-block-start: 0; margin-inline-start: 0; margin-inline-end: 0;" ><iframe src="https://api.vadoo.tv/iframe_test?id=kwfCU941wqJY2csUllYRH6E3mlbGHtEN" scrolling="no" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute; overflow:hidden; border-radius: 5px;" allowfullscreen="1" allow="autoplay"></iframe></figure></div></div>

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

[1] (Webflow - Nomads Cast)

Hi Omar!

I used your code in my own testbed project, published it, and it did work just fine. I then opened your read-only link and added the code to a new HTML Embed, and it worked fine in the designer (obviously I can not test the published version though).

Can you try re-adding the element and publishing the site to a webflow.io domain so I can take a look at a published version and see what’s different? Let me know where you place it so I know where to look if it still doesn’t load.

Thanks!

Hey Chris!

Thanks for getting back to me.

I’ve gone ahead and re-added the element and published on a webflow.io domain so that you can take a look.

https://nomads-cast.webflow.io/

The HTML embed that is not working is in the testimonial section, see embedded image!

Thanks Chris!

Thanks for providing this. I took a look at it, and I have good and bad news :sweat_smile:

There is something inside your custom code that is just destroying any sort of sensible sizing. Each nested element <div> to <figure> to <iframe> all have some really odd positioning / sizing going on. I tried a few different ways of modifying this and didn’t land on a solid solution, but some combination of this along with the container you have it placed in is causing an issue.

So, you could dive into this custom code, figure out where the issue lies by process of elimination, and fix it. However, there is a much easier solution. It’s a band-aid, but it does end up showing properly if you just define a width to the HTML embed in the designer.

So, you could just do that and be done with it or dig into that code and figure out where the disconnect is. Hope this helps!