Wordpress Plugin - <div> setting not working, <iframe> works

iframe
wordpress

#1

I’m using the new plugin for wordpress and I’d like to be able to embed the animation in a div as opposed to the iframe. However, after I upload the .OAM then I select div from the dropdown on the widget page, the animation fails to load.

It loads when I select the iframe option, although the iframe is setting the canvas to the mobile layout.

In the console I get the error message:
mywebsite.com/test-animation/calendar.hyperesources/HYPE-596.thin.min.js

Assuming its a pathing issue.

Thanks


#2

Can you share the page where it’s not working? ( I was for a second hoping you had the mywebsite.com domain. Major props).

Does your Hype document have anything in the <head> that it depends on to run? The DIV option strips all this out and reduces the embed to just a single JS embed which in turn loads all the other JS (including the HYPE-596 file you shared above).

The div option might also might cause issues with responsive layouts, so if you have ‘height’ checked in the responsive layout options, uncheck that.


#3

Thanks Daniel, we were able to resolve the issue by adding the code into the WP text editor.

<div id="calendar_hype_container" style="margin:auto;position:relative;width:480px;height:300px;overflow:hidden;">
  <script type="text/javascript" charset="utf-8" src="https://www.mywebsite.com/wp-content/uploads/2018/10/calendar_hype_generated_script-1.js"></script>
</div>

haha, sorry about the mywebsite, just didn’t want to make it public.