I find I cannot embed the export of a Hype project in Wordpress. Probably something to do with the javascript which I have added to the project, as simpler animations which do not include custom script are fine. I have tried embed, iFrame and .oam (using eralion’s ‘hype animations’ plugin) all to no avail. I have also tried swapping to a base Wordpress theme in case there was a conflict and still nothing displays.
Any thoughts? Project and exports here: basecircles.zip (234.7 KB)
in case it doesn’t display at all it’s because a responsive hypeexport needs an container within wordpress with absolute height …
just try a forum search to this topic
Thanks. I see people have difficulty quite a bit. This thread is helpful. However, trying with and height set as both px and % in iFrame and DIV code still does not get anything to display in my case, so I wonder if there is something else about the project itself.
there have also been issues with broken paths in wordpress workflows …
you may post a link …
There have been problems with locating the resources folder in wordpress that has caused problems in the past. As Hans says, can you post a link?
This is a wordpress page
which should display this hype project here being called directly from the generated HTML
The code on the Wordpress page is:
<div id="basecircles_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite"> <script type="text/javascript" charset="utf-8" src="http://www.donebauer.net/wp-content/uploads/hypeanimations/test/basecircles.hyperesources/basecircles_hype_generated_script.js?61574"></script> </div>
I have as I say tried iFrame and .oam embed alternatives and have also set height and width in pixels.
Can you share your Hype document too? It’s just a few of your elements seem to be opacity 0 and rgb 0 also. It’s difficult to know what your document is doing. I can confirm it’s not a path issue. The site sees the Hype files fine.
it's like mentioned in my first post:
the wrapper-div with id = basecircles_hype_container needs to have an absolute height to display a responsive hypeexport
See the first post in the thread for the Hype project itself.
I have tried setting absolute height for the project but it makes no difference.
ok. thanks. Can I confirm you’ve done what Hans has said? Placed an absolute height on the container div (“wrapper-div”) or put it inside another element with an absolute height?
@iaeon your hypedoc is responsive AND your div with id “basecircles_hype_container” needs to have a height (style=“height:500px;”)
Thanks for your patience guys. I thought I had tried setting an absolute height on both the container DIV and the content, but I guess in all the combinations I went through I missed this or got something wrong.
I suppose the moral is that Wordpress is not a great platform for fully responsive content from Hype? Then again in most cases this solution is probably OK as changing window width still works reasonably well.
Thanks again!
no 
you may use a relative / absolute unit / size for the container .. say 100vh or you use some javascript to react on events and dynamically set new sizes ... it all depends on your needs
The key issue is that Hype's 'fully responsive' feature looks at the available width & height of the element in which it is embedded. This works well when Hype elements appear in their own page, but is at odds with the majority of responsive designs (Wordpress themes) which assume that the content areas have a determinable height.
Instead of using Flexible Layouts, use the Responsive Layout feature for embedding in Wordpress This exports a document with a set width / height that does not use percentages. It is the height:100%; value on documents with flexible layouts that causes this problem.
Or, set a minimum-height on the actual Hype div if you are using Flexible Layouts. Or even better -- create responsive layouts that don't have the 'height' scale option checked.
This video takes you from a non-responsive document all the way to embedding a Wordpress document on a page:
