Hype in WordPress = iframe's height fails to shorten

adrjork · July 25, 2022, 12:58am

Hi everyone,
I can't solve an issue with Hype plugin for WordPress.
I made a little test-presentation at 1200x750 px, grouped every scene at the same size (all pins except south, both vertical and horizontal axes, shrink to fit, zoom contents).
Then I uploaded the OAM file in WP via plugin, set iframe, added minheight750, updated, pasted shortcode into a new page, and added the string .minheight750 { height:750px; } in CSS.
Now, if I open the resulting page with a well defined and large computer browser, then the page opens with a correct 1200x750 iframe containing my 1200x750 presentation. BUT if I narrow my browser window (or if I open the page in a tablet/smartphone) two things happes:

My presentation gets proportionally smaller (that's correct);
The iframe itself (the black “container”) resizes only its horizontal dimension, NOT the vertical dimension! The iframe's height remains 750 (it clearly comes from the CSS added string).

This result is unpleasant because in a smartphone (just for example) you can see a tall black window where the presentation itself occupies just the upper portion (it appears like a black-unused extension under the presentation).

Is there a way to force ALSO the iframe's height to proportionally resize?

Thanks a lot.

Photics · July 25, 2022, 1:37am

Maybe this helps… Tumult Hype Animations Wordpress Plugin - #112 by Photics

adrjork · July 25, 2022, 4:35am

Dear Photics, THANKS A LOT!
Just a question: I've used your code (from the 112th post) putting CSS stuff in theme's Add Custom CSS, and putting the “div around shortcode” in the page (replacing the ), and finally adding hype-iframe class into the plugin.
Now, html stuff remains... I didn't use that part at all, but strangely the presentation is now perfectly working anyway!
Why? And where should I place that html?
Thanks again.

Photics · July 25, 2022, 10:34am

If you're using the plugin, you don't need the two parts of html. Just the one line should be fine. Are you using something like this…

<div class="hype-box-16x9">[hypeanimations_anim id="1"]</div>

adrjork · July 25, 2022, 2:23pm

Photics:

If you're using the plugin, you don't need the two parts of html. Just the one line should be fine. Are you using something like this…
<div class="hype-box-16x9">[hypeanimations_anim id="1"]</div>

Yes, exactly (added as it is, to a page with Classic Editor). In my case I made a 16x10 box, infact I added to the theme the CSS part as following:

.hype-box-16x10 {
position: relative;
width: 100%;
height: 0;
padding-top: 62.50%;
margin-bottom: 20px;
}

.hype-iframe {
position: absolute;
top: 0;
width: 100%;
height: 100%;
border: none;
overflow: hidden;
}

Where 62.50% refers to 16/10 ratio.

The sole part I didn't use is the following:

<div class="hype-box-16x10">
<iframe class="hype-iframe" src="/files/templates/physics" allowfullscreen="allowfullscreen">
</iframe>
</div>