Zooming iframe content

Q & A › Category: All › Zooming iframe content

Luci Staff asked 3 years ago

If the iframe source is a different domain, you’re out of luck. You won’t be able to add CSS if that’s the case. Search for the issues and reasons if interested.

The best alternative option might be to change the size of the iframe container, the iframe itself, or scale the iframe. Here’s how the scale the iframe:

var w = $(window).width();
var h = $(window).height();
var scale = 1;

function zoom(x) {
  if (x === -1) {
    scale = scale * 1.1;
    w = w * 0.9;
    h = h * 0.9;
    $("#myiframe").width(w + "px");
    $("#myiframe").height(h + "px")
  } else {
    scale = scale * 0.9;
    w = w * 1.1;
    h = h * 1.1;
    $("#myiframe").width(w + "px");
    $("#myiframe").height(h + "px")
  }

  $('#myiframe').css('transform', `scale(${scale})`);
}

html,
body {
  background-color: #ccc;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

#iframe_container {
  background-color: #ffffff;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
}

#myiframe {
  overflow: scroll;
  border: 0;
  width: 100%;
  height: 100%;
  transform: scale(1);
  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

button {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="zoom(1)">- ZOOM OUT</button>
<button type="button" onclick="zoom(-1)">+ ZOOM IN</button>
<br>
<div id="iframe_container">
  <iframe id="myiframe" src="//api.project.org/api/v2/doc/doc?query=christmas&mode=ArtList&maxrecords=15&timespan=24h"></iframe>
</div>