XD iFrame Embed not working (UPDATED)

[levi_v]

When I try to share my XD prototype on my website via the iframe embed code option I get some console errors and the content doesn't load (Chrome and FF):

[Report Only] Refused to compile or instantiate WebAssembly module because 'wasm-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src https://static.adobelogin.com/imslib/imslib.min.js https://prod.adobeccstatic.com/ 'self' 'unsafe-eval' https://bam.nr-data.net/ https://api.demandbase.com/ https://js-agent.newrelic.com/ https://www.gstatic.com/recaptcha/ https://c.evidon.com/geo/country.js https://assets.adobedtm.com/ https://use.typekit.net/ https://www.google.com/recaptcha/api.js https://*.adobe.com https://*.cookielaw.org/ https://*.onetrust.com/ 'nonce-3033030a-8d29-4314-8a27-94653d6b2f87'".

Prototype URL: https://xd.adobe.com/view/b755cdbe-f683-4193-973d-a66069d1088f-e206/?fullscreen

JS Console:

Codepen:

https://codepen.io/levivoelz/pen/bGpWVBB

Am I missing something? Why can't I share it on my website?

UPDATE: Turns out this is a non-issue functionally even though there is an error. I wasn't able to see the embeded content because my browser window was too small and I was expecting the content to be responsive. I'd delete this post if I could!

[HARSHIKA_VERMA]

Hi there,

Thanks for reaching out. I would like to confirm if your issue is resolved. Please let us know if you need assistance from us.

We would be happy to help.

Thanks,

Harshika

[levi_v]

Resolved. Thanks!

[Yashika26523968dg5p]

Hello,

I tried embedding my Adobe XD prototype into Behance and Adobe Portfolio. Both the sites showed "There was a problem displaying this prototype. Please try these troubleshooting steps.". I tried all troubleshooting steps and still am facing the same issue. Please help resolve.

[levi_v · Accepted solution]

For what it's worth, I was able to make my iframe responsive by using some off-the-shelf CSS and a little bit of tweaking.

/* see https://davidwalsh.name/responsive-iframes */
<style>
.iframe-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* h/w, i.e. 1080/1920, replace with your percentage */
  max-width: 1920px; /** replace with your canvas width **/
  margin: auto;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  max-width: calc(100vh * 1.78); /* replace with your number, divide canvas width by height, i.e. 1920w/1080h = 1.78 */
}
</style>
<div class='iframe-container'>
  <iframe
    class="responsive-iframe"
    src="https://xd.adobe.com/view/b755cdbe-f683-4193-973d-a66069d1088f-e206/?fullscreen"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>