Widget height to be responsive to content

I'm trying to install the embed code for our Acuity booking page into my shopify website. However the frame of the widget is not being responsive to the content, or it is making a scroll bar within a small area. 

How can I make this be responsive to the content, as it keeps extending in height as the customer journeys on to booking. 

<iframe src="https://app.acuityscheduling.com/schedule.php?owner=32172348&ref=embedded_csp" title="Schedule Appointment" width="100%" height="800" frameBorder="0"></iframe><script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>

Can you share link to page where you added it? We can check easier.

This is the main page we have it embedded. 

https://honeyfawn.com.au/pages/book-an-appointment

We have worked with the theme designer to put a custom CSS for padding on the iframe, however it's still not a long term fix. On Desktop the page is much larger than required, and on mobile you still need to scroll through the widget 

I see you are using Shopify site

You can add this code to theme.liquid file, before </head>

<style>
  #shopify-section-template--15172804345950__main .video-wrapper {
    padding-bottom: 70% !important;
}
  @media screen and (max-width:767px) {
  #shopify-section-template--15172804345950__main .video-wrapper {
    padding-bottom: 300% !important;
}
  }
</style>