Hi all! 
Anyone here having experience putting an Hype animation into a 'custom block' using the 'Invision' forum pagebuilder blockmanager forum software?
I'm having difficulties making the Hype part properly responsive.
What happens is that on sizing the browsers window down I get a black bar above and below the Hype animation that keeps the size of the "box" it is in, at a fixed height. Probably because of the height in the iframe but when I do not use this height or try to use a percentage, the hype animation becomes stamp sized.
I tried making the iframe responsive according to this W3 schools tutorial but that had sadly zero effect, the hype animation becomes stamp sized in a left corner.
This is my 'block' code:
<iframe frameborder="0" height="671px" scrolling="no" src="https://website.com/forum/index.php?/intro.html/" style="display:block" width="100%"></iframe>
In this 'block' is the 'intro.html' hype file code...
<div id="intro24f_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="https://website.com/intro2_.hyperesources/intro2_hype_generated_script.js?85008"></script>
</div>
...with a css styled as this:
html {
height:100%;
}
body {
background-color:#232323;
margin:0;
height:100%;
}
And this block must be placed into a wrapper which has this style:
<style>
html {
height:100%;
}
body {
background-color:#000;
margin:0;
height:100%;
}
</style>
The Hype animation self has these settings:
And the group, the animation is in, is set to this:
The Hype animation sizes perfectly down, exept when used in the invision block environment then I get black bars top/bottom when sizing the browserwindow down.
Anyone any idea's how to fix this maybe?
Thank you in advance!
