CODEWITHSUNDEEP
htmlcssiframe
Tamdim
Tamdim

Reputation: 1192

Resize iframe without changing page viewport

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. Here is what my code displays http://jsfiddle.net/chaudim/d57krjph/4/

example.html

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

example.css

.outer {
    width: 100%;
    height: 100%;
    max-width: 1034px;
    max-height: 543px;
    margin: 0 auto;
}
.inner {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}
.inner iframe {
    box-sizing: border-box;
    background: url(https://i.sstatic.net/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%;
}

enter image description here

Upvotes: 1

Views: 1492

Answers (3)

joshuaprakasam
joshuaprakasam

Reputation: 134

I managed to get the expected result but without responsiveness. I achieved this by scaling up width property along with scaling down using transform to fake the viewport to be of its bigger screen size.

Hope it brings closer to your expected result.

NOTE: Since this is have absolute values. It perfectly works with screen-size of minimum width 1060px and minimum height of 560px.

Demo Link with resized output panel: https://jsfiddle.net/jhb1yr3t/

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

.outer {
  position: relative;
  max-width: 1034px;
  height: 543px;
  background: url(https://i.sstatic.net/zZNgk.png) center center no-repeat;
}
iframe {
  position: absolute;
  top: -200px;
  left: -200px;
  width: 1433px;
  height: 950px;
  transform: scale(0.5);
}

Output Result: Output Result

Upvotes: 0

Yudiz Solutions
Yudiz Solutions

Reputation: 4459

Can you please check the below code? Hope it will work for you.

  1. Make responsive block inner using padding-top: 56%; property.

  2. We have given width:100% to the iframe and manage its resolution & position using position: absolute with respect to the responsive block.

Please refer to this link: https://jsfiddle.net/yudizsolutions/ac5dzrp4/1/

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

Stylesheet:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56%;
  background: url(https://i.sstatic.net/zZNgk.png) no-repeat center center / 100% auto;
}

.inner iframe {
  position: absolute;
  top: 9.2%;
  left: 15.5%;
  bottom: 0;
  right: 0;
  width: 69%;
  height: 76.6%;
  border: none;
}

Upvotes: 0

Eliya Cohen
Eliya Cohen

Reputation: 11508

I managed to view the desktop viewport by scaling down the iframe. Something like:

iframe {
    ...
    transform: scale(0.x);
}

Since we can't use iframes in stackoverflow, I had to write the demo inside jsfiddle - http://jsfiddle.net/atbLcxfg/31/

Upvotes: 2

Related Questions