Embeds no longer working / "cannot load image"

[KevinGimbel]

Hello!

I've been using your embed for some wile with Hugo, a static site generator, and I recently noticed that the embeds no longer work.

Here (https://kevingimbel.de/blog/2017/11/css-custom-properties-and-a-new-look/) should be one near the "CSS variables" headline.

I'm creating the embed code like this https://github.com/kevingimbel/hugo-kg-shortcodes/blob/master/layouts/shortcodes/caniuse.html#L5-L11, the bare code is taken from https://caniuse.bitsofco.de/

The rendered code is

<p class="ciu_embed" data-feature="css-variables" data-periods="future_1,current,past_1,past_2" data-accessible-colours="false"><picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-variables.webp"><source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-variables.png"><img src="https://caniuse.bitsofco.de/image/css-variables.jpg" alt="Data on support for the css-variables feature across the major browsers from caniuse.com"></picture></p>

and this looks correct, too. But nothing is shown and even the image cannot be loaded, when I click on the image link I see the image in the browser. 🤷

I'm not sure what is wrong, is there anything else I need to do? I'm loading the script from cdn.jsdelivr.net like so

<script async="" src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed/public/caniuse-embed.min.js"></script>

The only thing different is the async tag but I'm 100% sure this worked in the past.

Any help or hint is highly appreciated and thank you a lot for caniuse-embed, it's a super cool project!

[ireade]

Hi @kevingimbel ! Thank you, I'm glad you're enjoying using it 😃

I think I figured out what the problem is. In my script, I'm adding an event listener for DOMContentLoaded before I execute the code. Because of the async attribute, the event listener is added after DOMContentLoaded has already fired so the event is never triggered.

So you should remove the async attribute because I'm already only executing the code after everything has been loaded. I think what I'll also do is find a way to tell and automatically execute the code, but that may come later.

[KevinGimbel]

Thanks! Removing async got me a step further, now the iframe is included but it is still empty 🤔

I'll see if I can find out what's wrong.

[ireade]

@kevingimbel Hmm that's odd. I tried to recreate your code on this codepen but it's loading when I try it.

[KevinGimbel]

@ireade the codepen wasn't loading for me either, but then I realized the Privacy Badger extension was blocking your domain! When I whitelist it it is working.

I've submitted feedback to them, maybe they can do something about it. As far as I see there is nothing else you could do, thank you for your help!