How do I make my animation responsive?

To make an Animatron clip auto-size according to screen/container width, there are two options:

First is to use an <iframe> , and to not supply the (w)idth & (h)eight parameters in the clip URL, like this:

<iframe src="https://clips.animatron.com/fac728e3989f98f94378c7a90c0251ad"></iframe>

This way, the player will automatically occupy the whole size of the frame - so we can safely set the width to 100%.
​
​ Note: If the video clip’s aspect ratio does not match frame's, ribbons will be shown.

If you need your video clip to resize when the window is resized, you will have to embed the clip in your page. Check out our Embedding Guide for instructions on how to do it.

After you get the player instance, use the window's resize event to resize your player:
​ window.onresize = function(){
player._resize(window.innerWidth, window.innerHeight);
}
In the code above, the player is resized to occupy the whole window's width and height. You will have to adjust the function to use the container's dimensions if that is not what you want.

See an example here - try resizing the result window and see what happens!