Hi,
I am working on animating a video to animate from center to a ratio of the screen size, which I have successfully implemented using an html widget; However, I am looking for some guidance on how I might then have the widget be responsive to the change in browser dimensions. Unsure whether I would need to put some function on the widget or not…?
Thanks!
It’d probably be useful to know more explicitly about the setup between your widget and the overall document. If you can send the .hype document and any enclosing .html pages with the export that may be good to see.
It may just be the case that you need to setup Flexible Layout and potentially edit the widget’s inner HTML to set some enclosing elements to have a width/height to 100%.
Hi Jonathan,
Here are the settings you requested:
After further consideration, I experimented with breakpoints and layouts and this seemed to help, although I was hoping that I could have set the aforementioned components to work with any size as it would have theoretically scaled to match the frame (perhaps)…
Thanks!
Your code itself looks fine to me so I am surprised it does not work. The two likely culprits I can think of would be:
Perhaps you could try adding a border to the HTML Widget element and see if the element itself is growing and the contents is not?
The only other thing is that you are using a HTML Widget for this, but since the code itself is an iframe then it is pretty much an iframe within an iframe. You could try pasting that into a Rectangle element’s Inner HTML instead. But this is more of an efficiency than a fix; your setup looks fine.
Jonathan,
Adding layouts solved the solution for now. Not perfect, but a much better improvement.
Thanks for giving it a look!
My hint… don’t use a HTML widget to start with. Rather insert the Vimeo code into innerHTML on a DIV (in Hype this is a rectangle). HTML widget create iframes so you are sticking essentially an iframe into an iframe if your still using that approach.
Makes sense, thanks!