css - レスポンシブ YouTube ビデオをフレームに埋め込みますか?

Question

まず、問題の例への CodePen リンクがあります: http://codepen.io/Siyfion/full/sphCn

コード自体: http://codepen.io/Siyfion/pen/sphCn

YouTube 埋め込みビデオを配置したい中央にカットアウトのある iPad SVG 画像があります。私が抱えている問題は、画像が Bootstrap レスポンシブ グリッドにあることです。これは、デバイスの幅/高さに応じてサイズが変わることを意味します。

パーセンテージベースのオフセットを使用して、埋め込まれたビデオの位置とサイズを調整しようとしました。しかし、何らかの理由で、サイズ変更時にカットアウトに関連してビデオが縮小し、白い「ギャップ」が見えるようになるため、機能していないようです.

#iPadFrame {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
}

#iPadContent {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 78.4%;     
  padding-top: 25px;
  height: 0;
}

#iPadContent > iFrame {
  position: absolute;     
  top: 11.4%;
  left: 11.9%;
  width: 80.5%;
  height: 76.8%;
  z-index: 1;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1" id="movieSection">    
      <img id="iPadFrame" src="http://www.labellogiclive.com/images/af4f79b4.iPad.svg" alt="iPad Video Frame">
      <div id="iPadContent">
        <iframe src="http://www.youtube.com/embed/89OduOlMc0M?rel=0;showinfo=0;cc_load_policy=0;modestbranding=0;vq=hd720" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>