Integrating a web page inside another page can be performed very easily with the iframe tag. I noticed only one small problem: its sizing. If the width can be easily controlled at the zoom screen (100%), to choose the height: 100%; even by “amplifying” it (100%!important;) is not useful.
An elegant way is by using javascript, either embedded directly in the tag or as a callable function.
a. Embed variant
<iframe src="/test-pagina/" style="width:100%;border:none;" onload="this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';"></iframe>
or
<iframe src="https://www.youtube.com/embed/CWzrABouyeE" style="width:90%; height:70vh;border:none;margin:0 auto;display:block;" onload="this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';"></iframe>
b. Using the function. In the <head> section, enter the function below, which can then be called in the iframe tag script.
<script>
function fc_redimens_frame(obj) {
obj.style.width= 100 + '%';
obj.style.height = 0; // height recalculation, otherwise it would just increase
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight+10 + 'px';
}
</script>
<body>
<iframe src="/test-pagina/" style="width:100%;border:none;" onload="fc_redimens_frame(this)"></iframe>
</body>
If the positioning of the “play tricks” iframe (possible overlap over other blocks of text / images) can be placed, both before and after, a div with the attribute clear:
<div style="display: block; clear: both;"></div>
For a little relaxation, a pleasant example, played musically by the great Louis Armstrong.
