Skip to main content
levi_v
levi_v
Participant
August 26, 2020
Answered

XD iFrame Embed not working (UPDATED)

  • August 26, 2020
  • 2 replies
  • 4232 views

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!

    This topic has been closed for replies.
    Correct answer levi_v

    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>

     

    2 replies

    levi_v
    levi_vAuthorCorrect answer
    Participant
    August 27, 2020

    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>

     

    HARSHIKA_VERMA
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    August 26, 2020

    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
    levi_vAuthor
    Participant
    August 27, 2020

    Resolved. Thanks!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices