I am trying to set the iFrame's height to 80% and have an advertisement take up the remaining 20%.
Code
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<iframe id="iframe" src="xxxxxx" style="border:0; width:100%;"></iframe>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Text/image -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="xxxxxx"
data-ad-slot="xxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(window).load(function() {
$('#iframe').height('80%');
});
$(window).resize(function() {
$('#iframe').height('80%');
});
</script>
</body>
</html>
Screenshot
https://i.stack.imgur.com/iwvUq.png
What could be causing it not to work as expected?