.oam into Wordpress site / responsive aint work

1

Hello...
i want to make a html5 banner for on my website..with a little animation init..

I started very easy, only a text which comes floating in..
Without responsive it works..
but with responsive settings in Hype...it won't work ( see attach)

For importing html5 into the Wordpress I use the hype plugin..

When I upload my animation as a .oam is see this code in the plugin

<div id="bf4_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
	<script type="text/javascript" charset="utf-8" src="//www.kraaienrun.nl/wp-content/uploads/hypeanimations/7/bf4.hyperesources/bf4_hype_generated_script.js?62469"></script>
</div>

Does anyone has a suggestion?

Schermafbeelding 2020-09-07 om 14.43.34

2

solved, thanks to the older reactions

Typically the issue is that if you are using a flexible layout with a scale set on the height value, this may collapse down to 0 pixels if there’s not an explicit height on some parent element. The two solutions are:

  • Uncheck the height scale in the scene/layout editor so it does not use flexible layout on height
  • Introduce a container that has a height specified
3

hmm...sad enough it doesn't schrink to fit...
so it isn't responsive..

I can change the settings in Wordpress...100% to 1200pixels or something, but I'd like to have is responsive, on screen as on mobile

4

Are there any last developments on this case?

I can make an animation banner en export it without the height scale..
but how do I get it on mobile, iPad and screens?

I can do it handmade by this video..but I hope there is a quicker method

5

You can use a 100% height scale and thus shrink to fit, but as you discovered you would need a container DIV to have a specific height. Basically you need to make the fitting container yourself if you don't want an explicit height.

Hype doesn't have a mode where it only looks at width or height to try to derive the other value, though we have it filed to investigate adding this feature due to the issues with embedding in wordpress.

6

oke thanks, I'm not a code guy...
so the easiest way for me is by the hand of tutorial?

our site has to be seen on phone, iPad and screen...
maybe I can make a div with specific height in Wordpress...I hope for every device a specific height...(I'm gonna search and let you know)

7

There's some information about how to work with responsive height documents in the 'responsive document tips' section here: Tumult Hype Animations Wordpress Plugin

For your case, adding an additional CSS class would help you set a minimum height for your document.

This may also be helpful: Creating a Flexible Tumult Hype Document within a DIV with no set 'height' if you can add the .js code to the 'head' of your post or page.

8

i guess an *.oam-embed will strip off the head-section ... ?! so you'll have to put the script to your wordpress-index-file headsection ...

9

FYI

https://forums.tumult.com/t/creating-a-flexible-tumult-hype-document-within-a-div-with-no-set-height/13224/20?u=h_classen

1 Like