Canva project not embedded?

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#116848 Canva project not embedded?

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by fabio42 on Tuesday, 27 August 2024 10:53 BST

Monday, 26 August 2024 20:48 BST

fabio42

Hi!

After having issues embedding iframes (from a padlet platform - #116847 Iframes need javascript to be enabled in the browser?), I am having issues embedding a Canva.com project.

When I embed it in the editor with the code, and then I click on preview, this works fine but only in the preview tab. If I go back to the editor tab, the project does not appear. If I publish the article, and try to view the canva project on my website, it does not show up, though I set "Sandbox" to "no".

What should I do?

Just for info, here's the code I use to embed the project:

<div style="position: relative; width: 100%; height: 0; padding-top: 83.8298%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
	<iframe src="https://www.canva.com/design/DAF6zsv4h_k/Gy3ypzNz95sYTbXBLY01Cw/watch?embed" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0;" allow="fullscreen" loading="lazy" allowfullscreen="allowfullscreen"> </iframe>
</div>
<p><a href="https://www.canva.com/design/DAF6zsv4h_k/Gy3ypzNz95sYTbXBLY01Cw/watch?utm_content=DAF6zsv4h_k&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">Trip to England</a> par f. a.</p>

Tuesday, 27 August 2024 09:43 BST

Ryan

If I publish the article, and try to view the canva project on my website, it does not show up, though I set "Sandbox" to "no".

Please post a link to the article on your site.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 27 August 2024 10:26 BST

fabio42

Here's the link:

https://www.4u2learn.fr/joomla/4u2learn/december-2023-trip-to-england-fun-memories

Tuesday, 27 August 2024 10:31 BST

Ryan

This is sort of a conflict with Responsify, as your iframe code already includes styles to make the iframe somewhat responsive.

Try changing the canva iframe code to:

<iframe src="https://www.canva.com/design/DAF6zsv4h_k/Gy3ypzNz95sYTbXBLY01Cw/watch?embed" height="600" width="800" loading="lazy" allow="fullscreen" allowfullscreen="allowfullscreen"> </iframe>
<p><a href="https://www.canva.com/design/DAF6zsv4h_k/Gy3ypzNz95sYTbXBLY01Cw/watch?utm_content=DAF6zsv4h_k&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">Trip to England</a> par f. a.</p>

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 27 August 2024 10:38 BST

Ryan

Alternatively, you would need to disable Responsify for this particular Menu item, which can you do in the Responsify parameters. This might be the best solution, as Responsify does not properly display the iframe for this particular iframe size and aspect ratio.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Edited by Ryan on 2024-08-27 10:38 BST

Tuesday, 27 August 2024 10:41 BST

Ryan

Add a class="wf-responsive-no-container" to the iframe will also disable Responsify for this particular iframe, eg:

<div style="position: relative; width: 100%; height: 0; padding-top: 83.8298%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;">
	<iframe src="https://www.canva.com/design/DAF6zsv4h_k/Gy3ypzNz95sYTbXBLY01Cw/watch?embed" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0;" allow="fullscreen" loading="lazy" allowfullscreen="allowfullscreen" class="wf-responsive-no-container"> </iframe>
</div>
<p><a href="https://www.canva.com/design/DAF6zsv4h_k/Gy3ypzNz95sYTbXBLY01Cw/watch?utm_content=DAF6zsv4h_k&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">Trip to England</a> par f. a.</p>

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 27 August 2024 10:41 BST

fabio42

It does work! thanks. Yet, I can't figure out why if I use the method of just suggesting the link to the project through the Iframes window, it does not work. Not inserting any code should make it work plain-sailing, no?

Attachments

Tuesday, 27 August 2024 10:47 BST

Ryan

Yet, I can't figure out why if I use the method of just suggesting the link to the project through the Iframes window, it does not work. Not inserting any code should make it work plain-sailing, no?

This works for me. Have you used the full url? - https://www.canva.com/design/DAF6zsv4h_k/Gy3ypzNz95sYTbXBLY01Cw/watch?embed

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Tuesday, 27 August 2024 10:53 BST

fabio42

Ok, wrong me. Was sure I had tested it properly. Now, I'll use this method instead of inserting code!

Fully solved then!