Html 在PNG图像中嵌入Vimeo视频

我试图在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的要高，但仍然不起作用。它也没有反应。如何解决此问题？有什么建议吗？

创建一个

div

元素，并在CSS中设置其

宽度

和

高度

属性。然后为该div应用

背景图像

。然后您可以尝试将vimeo视频嵌入该

div

：

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

---

保持

padding

值的百分比，以实现响应性设计。

为什么要使用固定尺寸？它显然不会有反应。用百分比代替。

.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 */;
}