Copy link to clipboard
Copied
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!
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%;
hei
...
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Resolved. Thanks!
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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>