JSFiddle - React, Tailwind, and code Playground

by dustinkerstein

HTML

<iframe id="embedPanoMoment" pano="PanoMoments" allowfullscreen="1" allow="vr" frameBorder="0" width="420" height="320" scrolling="no" src="http://localhost:3000/embed/5b2e9e2304d03344f01d8475"></iframe>
<script type="text/javascript">
  // This Javascript handles responsize sizing of the iFrame if the Width/Height parameters are set in percentages.  // Note this will only work with 1 PanoMoment per page.   // If you have multiple PanoMoment iFrames on a single page you'll need to modify this code.  var iFrame = document.getElementById("embedPanoMoment");   var originalHeight = parseFloat(iFrame.height);  var originalWidth = parseFloat(iFrame.width);  // Only resize if iFrame size is defined as a percentage or not set at all.  if ((iFrame.width.indexOf("%") > -1 || iFrame.height.indexOf("%") > -1) || (!iFrame.width && !iFrame.width))  {    window.addEventListener('resize', function(event){      setIFrameSize();    });    setIFrameSize();  }  function setIFrameSize() {    // Set the iFrame size to the parent element's size if specified, else set to screen size.    if (iFrame.parentElement.style.width && originalWidth) {      iFrame.style.width = (originalWidth / 100 ) * iFrame.parentElement.style.width;    } else {      iFrame.style.width = window.innerWidth;      iFrame.width = window.innerWidth;    }    if (iFrame.parentElement.style.height && originalHeight) {      iFrame.style.height = (originalHeight / 100 ) * iFrame.parentElement.style.height;    } else {      iFrame.style.height = window.innerHeight;      iFrame.height = window.innerHeight;    }  }

</script>