how to embed Google Form iframe in html css with flexible height (responsive)

Question

The problem is that I have multi page google form with each page has different amount of text#. It's to be embedded in long form blog post as a quiz. The problem is that google only provides iFrame code and iframe isn't letting me set flexible height.

I have tried Ben Marshall, I've tried height:100% in both style header and in the actual iframe and still not.

1. If I give it the average height, one needs to scroll on longest text
2. If I give it the height of the longest slide, then there is a huge white space.
3. When I give no height, the iframe is really small and one has to scroll on even the shortest page.

Ideally I want a way to use a flex box or something around the iframe that it will change height depending on the size of the form. Otherwise is there a way to make the google form the center of the iframe - to divide the extra space up? This is a example google form

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf0yROc5FfPcvex7G3e1uPGXo3nmQMk99EKZypuarafcVtwhw/viewform?embedded=true" width="640" height="903" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

I am only familiar with CSS and Html.

Thank you for your time and assistance

Answer 1

Cross-origin security features in browsers prevent you reading information about the document in the frame (including the rendered height of it) without the explicit co-operation of the site inside the frame.

So you can't do this.