在框架中嵌入响应式YouTube视频？

Question

首先，这是一个代码问题示例的CodePen链接：http://codepen.io/Siyfion/full/sphCn

代码本身：http://codepen.io/Siyfion/pen/sphCn

我有一个iPad SVG图像，中间有一个剪切区，我想在其中放置一个YouTube嵌入式视频。我遇到的问题是图像是在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>