将Vimeo视频嵌入到PNG图像中

Question

我试图在iPhone的PNG图像内播放某个视频。 iPhone作为视频的框架。我能做到这一点使用这个CSS代码：

 #phone_container { 
      width: 343px; 
      /* Adjust Phone image width */ 
      height: 663px; 
      /* Adjust Phone image height */ 
      position: relative; 
     } 

     #phone_container:after { 
      content: ''; 
      display: block; 
      background: url('iphone png link') no-repeat top left transparent; 
      width: 100%; 
      height: 100%; 
      left: 0px; 
      top: 0px; 
      position: absolute; 
      z-index: 10; 
     } 
     #video-placeholder { 
      position: absolute; 
      top: 125px; 
      /* Adjust top position */ 
      left: 55px; 
      /* Adjust left position */ 
      z-index: 5; 
     } 

我也能做到这一点使用这个HTML代码：

 <div class="row demo-video"> 
      <div class="col-md-5 left-side" id="phone_container"> 
      <div> 
       <iframe id="video-placeholder" src="Video Link" width="270" height="464" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
      </div> 
      </div> 

虽然是工作完全正常，唯一的问题是，由于iframe的z-index小于图像。 Vimeo播放器控件不起作用。我尝试将播放器控件的z-index设置得比iPhone的高，但它仍然不起作用。它也没有响应。我该如何解决这个问题？有什么建议么？

Answer 1

创建一个div元素并在CSS中设置其width和height属性。然后为该div应用background-image。然后，你可以尝试在div内嵌入VIMEO视频：

<div class="vimeo-video"> 
<!-- vimeo embed link with appropriate width and height //--> 
</div> 

添加CSS是这样的：

.vimeo-video { 
    background-image: url('link-to-png.png'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    padding-top: /* play around with this to fit the video */; 
    padding-bottom: /* play around with this to fit the video */; 
    padding-left: /* play around with this to fit the video */; 
    padding-right: /* play around with this to fit the video */; 
} 

请百分比padding值，以使响应式设计。