JSFiddle - React, Tailwind, and code Playground

HTML

<div id='topcontent'>
  Enter URL and then scroll down to load iframe content
  <p>
    <input id="url" type="text" placeholder="http://somewebsite" value="https://slashdot.org" />
  </p>
</div>
<!-- do not set src attribute -->
<iframe id='iframe'></iframe>

CSS

#topcontent {
  height: 3000px;
  background-color: lightgray;
}
iframe
{
  height: 400px;
  width: auto;
}

JavaScript

var $iframe = $("#iframe");
var iframeLoaded = false;
$(window).on("scroll", function() {
  if (!iframeLoaded && isScrolledIntoView($iframe[0])) {
    iframeLoaded = true;
    var url = $("#url").val();
    // skip input validation to keep example simple
    $iframe.attr("src", url);
  }
});

// from http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}