How to use image for iframe

user_11930422 0
Viewed 185

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>

css html
2 Answers

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>

user_12648040

try this

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