Use with Tumult Hype HTML5 editor - height and width changed to new undesired values when rendered

[markhunte]

Hi, When used with Tumult Hype a HTML5 animation and website design app. https://tumult.com/hype/pro/

We can assign a div to be used as the video container. This works fine but if we set the div to anchor to all sides of the scene/viewport when rendered, scrolly-video changes the height from its set px to 100vh and width from its set px to 100%.

This change renders the container incorrect and makes it actually smaller than the view port.

change

<div class="HYPE_element" id="scrolVid" hype_scene_index="0" style="pointer-events: auto; position: sticky; border-style: solid; overflow: hidden; z-index: 1; border-width: 4px; width: 100%; height: 100vh; transform-origin: 50% 50%; transform: translateX(4px) translateY(8px) rotateY(0deg); display: block; top: 0px;">

what it should be

<div class="HYPE_element" id="scrolVid" hype_scene_index="0" style="pointer-events: auto; position: absolute; border-style: solid; overflow: visible; z-index: 1; border-width: 4px; width: 584px; height: 1980px; transform-origin: 50% 50%; transform: translateX(4px) translateY(8px) rotateY(0deg); display: block; top: 0px;">

This can be corrected if we add css to override this change but that means we are duplicating our properties that we have already set in the user interface of the editor.

[markhunte]

update And just realised it does this because Full viewport is true by default so instead of changing the css you can set the option full: false

[dkaoster]

@markhunte that's right, scrollyvideo defaults to a full viewport because that's what I've found to be the most common use case for folks trying to use this library. If it makes sense to change the default, I'm happy to reconsider.

Going to close this for now, but feel free to reopen if you have any more comments!