How to use image for iframe - html

Question

I want to put the iframe inside a phone image. Phone image is .png and has a transparent background.
I don't know how to mask iframe and make it visible only inside 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>

Answer 1

Here's a start. I've applied border radius to mask the iframe's corners, disabled pointer events on the image, and set scroll on the iframe's x-axis. Notice also that the image falls after the iframe in the document so it appears over the top of the iframe.
.wrapper {
display: inline-block;
position: relative;
width: 250px;
height: 600px;
overflow: hidden;
}
.wrapper > img, .wrapper > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper > iframe {
overflow-x: auto;
border-radius: 60px;
}
.wrapper > img {
pointer-events: none; /* stop click & scroll on the image */
}
<div class="phone">
<div class="wrapper">
<iframe src="https://onsen.io/samples/" id="frame_1"></iframe>
<img src="https://i.ibb.co/y8HRgg4/phone-front.png">
</div>
</div>

Answer 2

try this
<iframe src="https://i.ibb.co/y8HRgg4/phone-front.png" frameborder="0"></iframe>