There should not be anything special needed to resize the Spine player. For example, this page has a player:
http://esotericsoftware.com/spine-player
If you resize the page smaller, the player resizes as expected.

Given that, I'm not sure where you are having trouble? It may help if you can provide HTML + JavaScript that shows the problem, possibly using resources in the spine-runtimes so you don't have to provide your own.

FKL34TI5T5 Firstly, the docs give no information how to resize the Spine Player itself.

The player renders to a canvas that is an HTML element, so it's size and position are set like anything else in HTML.

FKL34TI5T5 The example from your link shows a large area left and right that is not part of the animation.

The player draws a skeleton within the player bounds. By default the skeleton is scaled to fit. This means there can be empty space around the skeleton.

FKL34TI5T5 If you add a background it also has the same problem.

You've jumped to defining the behavior as a problem, but the player is working as designed. I have not yet understood your goal, but I see a lot of text so I'll read on!

FKL34TI5T5 if you have a non-simple canvas where things not rendered in sprites are off screen, then it is a whole different level of things broken. The bounding boxes move around, and if you have a background meant for different aspect ratios, it makes it even small and moving around.

It's not clear what non-simple might mean. If you have a background in your skeleton or your attachments are moving off screen, then the default behavior that sets the viewport to fit the animation will probably not be what you want. In that case, set a viewport explicitly (see below).

FKL34TI5T5 The goal is to show in a canvas size of choice (can sniff browser size for example) and to display a responsive animation with no letter boxing.

Ah, OK! You should be able to do this. More below.

FKL34TI5T5 I don't know where all of this background space is coming from, because it's not in the Spine file or atlas.

You can think of the player as a viewport, like a window looking at your animation. If the window is farther away, you'll see a smaller animation and more space around it. The default automatically defined viewport works by going though your animation and computing the maximal bounds, then it zooms so that fits within the player bounds.

FKL34TI5T5 Finally, the atlas really seems to dictate size

The size of your animation comes from the skeleton animation data. You can use different size images and the skeleton should render at the same size, just with more or less pixelated images.

FKL34TI5T5 the only way I can get it to zoom in is by guessing and checking, but I have no idea what is happening to the divs.

Guessing and checking at what? I'm not sure what DIVs you mean.

FKL34TI5T5 It's not listed either how you should prepare your file. Should 0,0 be in the middle, top-middle, bottom-left (most logical to me) or somewhere else

It doesn't matter. The automatic viewport finds the bounds, no matter where things are placed. If setting viewport bounds manually, then you'd set them to wherever your skeleton is positioned in world space in Spine.

Onward to defining a viewport manually! See the docs here:
https://esotericsoftware.com/spine-player#Viewports
In Spine you can turn on rulers with ctrl+shift+R (cmd on mac), which I see you've done. In 4.2 (which I see you are using) it shows the number, which is handy. The viewport definition looks like:

 viewport: {
    x: 0,
    y: 0,
    width: 300,
    height: 300
 }

In the Spine take note of the lower left corner of where you want your viewport and set x and y to those coordinates. Then see the coordinates in Spine for the upper right corner to determine the size and set width and height on your viewport. Now the player will show the viewport rectangle you've defined. If you size the player's canvas using the same aspect ratio, then you should not have "gutters" (aka black bars).

Hopefully that gets you unstuck! If not we'll get you there in time. Sorry if this was frustrating to get going.

The red and green lines show because you have debugRender: true and they represent the padding. Set the padding to 0 if you don't want it. Here's an example:
http://n4te.com/x/9612-exG4.txt.html
Source:
http://n4te.com/x/9612-exG4.txt.nowrap
Important bit:

viewport: {
	x: -200,
	y: -15,
	width: 450,
	height: 715,
	padLeft: 0,
	padRight: 0,
	padTop: 0,
	padBottom: 0
}

FKL34TI5T5 What are the green and red lines?

Green is the edge of the player's viewport. Red is the viewport you set, or the one that is set automatically if you didn't set one explicitly. This may be larger than the viewport you set if 1) the aspect ratio of the player differs from the aspect ratio of the viewport you set, or 2) if there is viewport padding.

The lines are drawn are here in the code.

FKL34TI5T5 What do they represent that I can control in Spine or with CSS?

You configure the viewport position, size, and padding using the viewport: { ... } section of the player config.

FKL34TI5T5 I want simply for the red and green bounds to be the same and the animation to fill everything by height.

Set the viewport padding to zero (see the "important bit" I provided in my last post) and size the player to match the aspect ratio of your viewport.

FKL34TI5T5 Do you know what coordinates you should start things in? Does that even matter? Can you control that if it does?

It most certainly matters. Use the rulers in Spine to set your player viewport around your skeleton.

FKL34TI5T5 Is the above file shown ok?

Which file? AFAIK you haven't posted anything that I can run to see the behavior. Code snippets are fine, but I cannot run them.

I believe my example in my last post works like you want. It is self contained and you can run it.

The viewport settings are in world coordinates. They match the rulers in Spine. Here's your screenshot above with a rectangle drawn starting at 0,-5000 and having a size of 5000,5000:

Image removed due to the lack of support for HTTPS. | Show Anyway

That roughly matches your player screenshot.

I'd guess you want a viewport at about -1550,-2900 (x,y) with a size of about 3000,2900 (width,height). Here's how I arrived at those values:

Image removed due to the lack of support for HTTPS. | Show Anyway

You can place things in Spine to make the viewport easier to calculate. For example, place the lower left corner at 0,0 then it's easier to determine the width and height for your viewport.

Glad you got it working! Coordinate systems can be a pain. We'll consider how to improve the docs.

Nate Hello, I want to know how to get the world coordinates and size(width and height) of each animation. Can I only view it in the spine editor? I am not the creator of the spine animation, only got the exported JSON. Is there any other way to get it? Thank you!

@zangbianxuegu At runtime you can query the bounds of the skeleton's current pose via the Skeleton.getBounds() method.