Create a container that holds all of the circles (buttons) within. Then you can keep that container positioned in the middle of the screen regardless of the browser size. Then control that container and it's contents sizes with css media queries. At least that's how I'd approach it.
So basically this is what we ended up doing. First we have the body at 100% width and height. Then we have a "sticky" container with no width and 100% height. Then we have the image inside the sticky container so it stretches said container to the width of the image. The image also has 100% height. Then we have percentage margin-left or margin-right and width/heights for the buttons. They are floated left and right. They are inside the "sticky" container so they base their movements and sizes off the container which is conveniently sized to the size of the image. Since the proportions are always the same this works well. Errors encountered: 1. On IE8 the sticky container sizes to the size of the image before it is resized to the height of the screen. Basically ie8 is broken. For this I have a separate stylesheet where everything is in pixels with an 800px height of the main image. We also have flash fallback for the video now, at the client's request. 2. On mobile the width-height ratio of the image is different than the screen so the width of a 100% height image is too wide, causing side scrolling and weird placement of the invisible buttons. To combat this we added a 90% zoom for iphones/android, took away the user's ability to zoom and also added a bit of javascript to force refresh on switch from portrait to landscape on mobile or tablets.