I’ve been working with adding a lottie animation into my a course, which i have acheived using the iFrame components and uploading the index.html into the embedded content section. However the animation doesnt seem to fill the width of the container.
For example If i add an image to the similar/same block the image fills the available width and the height is set correctly based on the ratio of the image.
When i add the embeded content it seems to generate a fixed height and used this to scale the animation.
Is there a way to set the embedded content to go full width of the container (in this case a full width component) in the same way a png/jpg would behave?
I’ve attached some images might help The blue and green lines are shwoing the extremses of the block and components.
Does you embed code contain any width or height variables in it? If so you could swap these for 100%? You can DM me the embed code if you like and I can test it?
IIRC Lottie animations are SVG-based… and the thing with SVGs is that they don’t have a fixed width or height… which is why they scale up or down really nicely when PNGs & JPEGs don’t
If you have the ‘Automatically Calculate iFrame Height’ setting enabled I would recommend you turn this off and set the height manually. It might take a bit of experimentation to get it just right though.
Revisiting this topic again and still haven’t got this to work. This time I’m revisiting with a Rive animation in an iframe in case that makes a difference. But sadly no matter how I set the height (manually or automatically) the animation doesn’t scale as you would expect
So if the learners device doesn’t match my set size it doesn’t scale properly. It scales the width but seems to leave the height leaving some big gaps between content.
Posting this more as an FYI for other people try to use animations like Rive or Lottie and encounter the same issue
Have you tried using the iFrame Height Selector ? You can use this to get Evolve to read the height of a specific element within the iframe - rather than using the height of the iframe document itself.
