1

首先，这是问题示例的 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>

4

0 回答 0