iFrame has fixed width of 300px, without any styling defining 300px
The iframe-resizer doesn't resize iframe width by default. You have to explicitly specify it using sizeWidth setting.
window.iFrameResize({
log: false,
sizeWidth: true,
checkOrigin: false,
widthCalculationMethod: "rightMostElement",
heightCalculationMethod: "lowestElement"
}, "#myFrame");
body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js"></script>
<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/"></iframe>
<span>😵😜🤪</span>
The iframe content is animated so it affects iframe's width and height according to the specified width and height calculation methods. And the iframe-resizer updates dimensions on every animations start and end event.
Also, the iframe source is from codesandbox and the parent document is this StackOverflow answer page, so we need to set checkOrigin: false
as well.
Note: Had to set log: false
because the animations are happening very fast creating ton of logs in console.
You can provide your own size calculations form inside the iframe.ref:
<script>
window.iFrameResizer = {
widthCalculationMethod: function () {
return document.querySelector(".one").clientWidth;
}
};
</script>
In following demo the iframe resizes exactly to the width of green box.
window.iFrameResize({
log: false,
sizeWidth: true,
checkOrigin: false,
widthCalculationMethod: "rightMostElement",
heightCalculationMethod: "lowestElement"
}, "#myFrame");
body { background-color: wheat;}
iframe { border: 3px dashed green; }
span { font-size: 1.5rem;}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js"></script>
<div>Following iframe grows automatically!</div>
<iframe id="myFrame" scrolling="no" src="https://mvyom.csb.app/custom.html"></iframe>
<span>😵😜🤪</span>
Refer implementation of custom.html for better understanding. You can implement similar method for heightCalculationMethod
.