JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="dartmouth-responsive-container">
  <iframe frameborder="0" class="dartmouth-responsive-iframe" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRMo_qriDCeUgbKL5z90KE2ZtDrkMepy0BWf6CF2I_WXc0prbZjYArKTM_KjLbGfuQAMqwYA4zn_MH7/pubhtml?gid=1776606042&single=true&format=interactive&widget=true&headers=false"></iframe>
</div>

CSS

.dartmouth-responsive-container {
  position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.dartmouth-responsive-iframe {
  position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript

var resizeTimer

window.addEventListener('resize', function(event) {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    document.querySelector('.dartmouth-responsive-iframe').setAttribute('src', 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRMo_qriDCeUgbKL5z90KE2ZtDrkMepy0BWf6CF2I_WXc0prbZjYArKTM_KjLbGfuQAMqwYA4zn_MH7/pubhtml?gid=1776606042&single=true&format=interactive&widget=true&headers=false')

  }, 250);
})