Автоматическая высота iframe 100%
 

Здравствуйте!
Никак не получается решить задачу: Есть гугл-форма, которую я хочу вставить на страницу сайта wordpress с помощью iframe. Проблема в том, что нужно что бы эта форма отображалась целиком (без вертикальной полосы прокрутки) на экранах любой ширины. Насколько я понял в css height: 100% работать с iframe не будет и нужен какой-нибудь jquery скрипт, который должен пересчитывать высоту для iframe в пикселях уже после его загрузки... но в Интернете пока ничего подходящего не нашел (ну или у меня руки совсем кривые).
Пример формы:

<iframe id="ifr" src="https://docs.google.com/forms/d/e/1FAIpQLSdhHlHbeqXAnAlIkYgNGrP53NftgAym2eZBsVCZrkxwTWd1TQ/viewform?embedded=true" width="760" frameborder="0" marginheight="0" marginwidth="0">Загрузка...</iframe>

Как вариант, в страницу поставить ссылку на эту форму

<a id="invitation" href="https://docs.google.com/forms/d/e/1FAIpQLSdhHlHbeqXAnAlIkYgNGrP53NftgAym2eZBsVCZrkxwTWd1TQ/viewform" target="_blank">Приглашение на вечеринку</a>
<style>
#invitation {
  background: #3f51b5;
  padding: 1em;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  border-radius: 4px;
  font: bold 1em Arial, sans-serif;
}
</style>