Transparent Image over an Iframe Tag

Question

Guys, I want to create a page with HTML, CSS, JS, which will be like a Smartphone emulator, So, all the Touchable areas have been mapped from this website "https://www.image-map.net/" into an HTML file, It is inside the Iframe tag So could you please tell me how can I add a Transparent image of the Phone's skin over the iframe tag. I have a transparent image available. I wanted this "https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjqk9WAr-nkAhXQZCsKHaTKBa4QjRx6BAgBEAQ&url=https%3A%2F%2Fiphone.apkpure.com%2Foptions-pro-screener%2Fcom.mobileinteractive.optionsphone&psig=AOvVaw38DiZ3n2CfKC4Ar1zvCtZ9&ust=1569411308893567" the content inside the Device Dummy should be iframe

Answer 1

https://code.sololearn.com/Wtdl0JmyA0rE/#html
Like this, please show your code here.

Answer 2

Bro I have added a photo of 360x800 and it shows, landscape portrait is locked

Answer 3

Thanks for the reply

Answer 4

/** Remove this block of CSS */

@media screen and (orientation: landscape){
.phone{display: none;}
.alert{display: block;}

}

Answer 5

Please show your code!

Answer 6

/** Remove this block of HTML also */
<div class="alert">
Landscape orientation is locked.
</div>