Highlighted

XD iFrame Embed not working (UPDATED)

Community Beginner ,
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!

Community Beginner
Correct answer by levi_v | Community Beginner

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>

 

Views

55

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

XD iFrame Embed not working (UPDATED)

Community Beginner ,
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!

Community Beginner
Correct answer by levi_v | Community Beginner

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>

 

Views

56

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
Aug 26, 2020 0
Adobe Employee ,
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
Reply
Loading...
Aug 26, 2020 0
levi_v LATEST
Community Beginner ,
Aug 26, 2020

Copy link to clipboard

Copied

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
Reply
Loading...
Aug 26, 2020 0
Community Beginner ,
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
Reply
Loading...
Aug 26, 2020 0