Issue Embedding SL with Modern Player into HTML

I'm having a problem when I embed a Storyline interaction using the Modern player into an HTML page using an iframe. It cuts off and squishes the player controls within the iframe. It doesn't matter what size I set the height and width - it always does this.

This example is supposed to have "Resources" and "Legal Notice" in the top right, and the previous controls (both text and arrow) in the bottom right.

The code I'm using is: <iframe src="http://MyServer.com/MyCourse/story.html" width="980" height="658"></iframe> (I've played around with width and height)

I don't have this issue if I use the classic player. Help!