<div class="controller">
  <h3>iFrame Element Query</h3>
  <p>drag slider to view changes</p>
  <input type="range" min="0" max="100" value="100" step="1" class="range blue" id="range">
</div>

<iframe src="https://codepen.io/grayghostvisuals/live/d9e049f3631973a9e23f918a7b0d1361" frameborder="0" height="100%" width="100%" allowfullscreen></iframe>

// DEMO STYLES
// ==========================================================
$bg: #f2f2f2;
html{box-sizing:border-box;}html,body{height:100%;}body{box-sizing:border-box;padding:1rem;width:100%;background:$bg;}img{max-width:100%;width: 100%;}figure{margin:0;width: 100%;}*,*:before,*:after {box-sizing: inherit;}


// REQUIRED STYLES
// ==========================================================

iframe {
  height: 100%;
  max-width: 100%;
  overflow: visible;
  margin: auto;
  display: block;
}


// RANGE SLIDER
// ==========================================================

.controller {
  width: 100%;
  text-align: center;
}

function select(s) {
  return document.querySelector(s);
}

let rangeInput = document.getElementById("range"),
    parent     = select('iframe');

rangeInput.addEventListener('input', function(e) {
  parent.style = 'width:' + e.target.value + '%';
}, false);