html - Resize iframe without changing page viewport

Question

I have an iframe that is loaded inside a laptop png image. I want the iframe to simulate a desktop screen however I am not sure how to make the iframe resize itself to fit perfectly inside the screen without the viewport changing to mobile.

My current solution fits inside the screen however the iframe changes to the mobile viewport which I don't want http://jsfiddle.net/chaudim/d57krjph/1/

example.html

<div>
    <div>
        <iframe width="560" height="315" src="//www.plaid.com" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

example.css

div {
    width: 100%;
    height: 100%;
    max-width: 1034px;
    max-height: 543px;
    margin: 0 auto;
}
div div {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}
div iframe {
    box-sizing: border-box;
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    padding: 11.9% 15.5% 14.8%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

question from:https://stackoverflow.com/questions/65938833/resize-iframe-without-changing-page-viewport

Answer 1

Waitting for answers