Set height of IFRAME for different devices?

My content relies partly on IFRAMES and the content of those are dependant on the width and height of the iframe itself. The width is set for PC, Tablet and Mobile via CSS (I assume?), but the height is set for the component independently on device. Would it be possible to set height depentent on device screen size?

That’s a good callout - in Legacy Evolve you could set a different height for mobile but New Evolve doesn’t have that, let alone the ability to set for tablet as well. Will pass this request on.

Appreciate this may not be ideal, but as a workaround you could have three iframe elements and show/hide each based on device size using Logic.

Another solution COULD be if the height set in “IFrame height” field could be the value of a variable?

If that was possible I could set that variable in course logic as you suggest, without having to add multiple Iframes (which, I guess, would confict with the solution you gave for my earlier problems with iFrames not rendering while being hidden).

Not possible at the moment, I’m afraid. Interesting idea though…

Maybe not, I’m thinking that perhaps it could be done by using two variables?

Assuming you were revealing the iframe when a specific element was completed you could instead set a variable when it’s completed and have another variable that stores the device size (Global Action > Device Size Changed > Set Variable Text).

Then you could have a set of Global Actions like:
IF elementCompleted is Equal to true AND
IF deviceSize is Equal to 'desktop' THEN
SHOW element ‘desktop iframe’ THEN
HIDE elements ‘tablet iframe’ & ‘mobile iframe’

But I completely appreciate that at this point it’s getting pretty complicated!

Agree, complicated. We’re getting close to allowing me to write javascript sections INTO Evolve (which would be fun).

Having a variable that sets the height parameter seems a little simpler. :wink: