[SOLVED] How do I prevent the white space from appearing above and below my webpage?

How do I prevent the white space from appearing above and below my webpage?

Please click this image for a detailed description of my issue

See below for my HTML. I'm using Google's Swiffy to convert my ActionScript 3.0 SWF file into HTML5. Then I embed the HTML5 using an iFrame into my website.

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Swiffy Output</title>
  <script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.4/runtime.js"></script>
  <script>
    swiffyobject = {
        "as3": true,
        "frameRate": 24,
        "frameCount": 109,
        "backgroundColor": -1,
        "frameSize": {
          "ymin": 0,
          "xmin": 0,
          "ymax": 14500,
          "xmax": 20000
        },
        "fileSize": 233905,
        "v": "7.4.1",
  </script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%
    }
  </style>
</head>

<body style="margin-top: 0px; margin-bottom: 0px; overflow: hidden">
  <div id="swiffycontainer" style="width: 100%; height: 100%; margin-top: 0px; margin-bottom: 0px;">
  </div>
  <script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
      swiffyobject, {});

    stage.start();
  </script>
</body>

</html>

           <iframe id="myiFrame" src="http://autogatesystems.businesscatalyst.com/phone/QS_Steel/QS_Steel.htm"
    style="border:0px;-webkit-overflow-scrolling: touch;overflow: hidden; fub;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" height="604" width="100%"></iframe>

Solution

I solved it! I changed the height of my html Google Swiffy body to:

    height: 60vw

And inside the HTML file that hosts my iFrame I changed it to:

    height="60%"

White spaces gone from both the top and bottom!