I'm trying to integrate an iframe into a phone image with a transparent background. However, I am unsure how to effectively mask the iframe so that it only appears within the boundaries of the phone image.
.phone {
display: block;
position: relative;
right: 0;
bottom: 0;
float: right;
border: 1px solid red;
}
.phone > img {
width: 250px;
position: absolute;
}
.wrapper {
position: absolute;
top: 0;
} <div class="phone">
<img src="https://i.ibb.co/y8HRgg4/phone-front.png">
<div id="wrapper">
<div class="phone view_2" id="phone_1">
<iframe src="https://onsen.io/samples/" id="frame_1"></iframe>
</div>
</div>
</div>