iframe height issue – responsive HTML5

I am inserting a responsive HTML5 animation. I tried a height of 100% and a width of 100% but that only shows about the top 200px of the HTML5 animation. The full-size animation is about 1150 px x 700 px. When scaling down, I get lots of extra white space below because I am specifying the height so the full animation is visible.

I tried this:

<div class=”fitVids”><iframe src=”http://www.joerademan.com/overview4.html&#8221; width=”100%” height=”700px” frameborder=”0″ scrolling=”no”></iframe></div>

But it did not make a difference. Is there any way to get the scaling to function properly?

URL is http://ongolfusa.com. The animation is below the slider.

Thanks!