Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


XD iFrame Embed not working (UPDATED)

Community Beginner ,
Aug 26, 2020 Aug 26, 2020

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:

Screen Shot 2020-08-26 at 2.42.23 PM.png

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!

Views

622

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , Aug 26, 2020 Aug 26, 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%; hei...

Likes

Translate

Translate
Adobe Employee ,
Aug 26, 2020 Aug 26, 2020

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

LATEST

Resolved. Thanks!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 26, 2020 Aug 26, 2020

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>

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines