Resizing iframe in squarespace to match window height (dynamically)

Site URL: http://goodwellandbetter.com

Hello, 

I have the custom code I would like to display, its the landing page of the website that I only want to view my p5 sketch, so I embedded it as an iframe. The only issue now is getting the iframe to resize to the height of the screen, so my sketch can be fully visible on different screen sizes without having to scroll. Please help me solve this issue! 

I entered the following code in Page-->Settings-->Advanced-->Header-->>>>

<style> 
  #site-title {display:none!important;}
  #page.container {display:none!important;}
  #siteWrapper.clearfix.site-wrapper {display:none!important;}
  
  
</style>

<script>
         setTimeout(function(){
            window.location.href = 'https://goodwellandbetter.com/introduction-and-curatorial-statement';
         }, 300000);
</script>
        
      <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6063a8fceb34c530581d6d9b"><div class="row sqs-row"><div class="col sqs-col-12 span-12"><div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1617144028502_3267"><div class="sqs-block-content"> <iframe frameborder="0" name="Outside the Form" width="100%" height="1080px" src="https://editor.p5js.org/mariamadam/present/SNlipKxEa" allowfullscreen=""></iframe></div></div></div></div></div>

On 4/1/2021 at 6:49 PM, bangank36 said:

You can set height="100vh" to make sure it span full width

I thought that would work too, but when I put height = "100vh", squarespace defaults to setting the iframe at 100px height (since I'm writing it in the Page>Advanced>Header, I think).  Any other suggestions, why this isn't working?

2 hours ago, maramjee said:

I thought that would work too, but when I put height = "100vh", squarespace defaults to setting the iframe at 100px height (since I'm writing it in the Page>Advanced>Header, I think).  Any other suggestions, why this isn't working?

Remove width and height attribute on iframe and add this css to Design_Custom CSS, it will make the iframe container fit viewport

#block-yui_3_17_2_1_1617144028502_3267 {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0;
}
#block-yui_3_17_2_1_1617144028502_3267 .sqs-block-content {
  height: 100%;
}
#block-yui_3_17_2_1_1617144028502_3267 iframe {
  top: 0;
  left: 0;
  height: 100% !important;
  width: 100% !important;
}

Thank you!! This worked!