Embedding Vimeo video inside a PNG image - html

Question

I am trying to play a certain video inside a PNG image of an iPhone. The iPhone is serving as a frame for the video. I was able to achieve this using this CSS code:
#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;
}
I was also able to achieve this using this HTML code:
<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>
Although it is working perfectly fine, the only problem is that since the z-index of the iframe is less than the image. The Vimeo player controls are not working. I tried setting the z-index of the player controls higher than that of the iPhone but it's still not working. It's also not responsive. How do I fix this problem? Any suggestions?

Answer 1

Create a div element and set its width and height attributes in CSS. Then apply the background-image for that div. Then you can try to embed the vimeo video within that div:
<div class="vimeo-video">
<!-- vimeo embed link with appropriate width and height //-->
</div>
Add CSS like this:
.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 */;
}
Keep padding values in percentages to enable a responsive design.