Iframes require a fixed height by default, which can leave scrollbars or empty space as your Juicer feed loads and grows. This guide shows you how to resize the iframe automatically to match its content.
How it works
Juicer feeds send size information to the parent page as they load, using the browser's postMessage API (the message type is juicer:feedSize). The snippet below listens for those messages and adjusts your iframe's height accordingly.
Note: the iframe may resize multiple times as the feed loads — this is normal as images load, animations complete, and visitors click "Load More" to fetch additional posts.
The auto-resize script
Add this JavaScript to your page after the Juicer iframe:
window.addEventListener('message', function(event) {
// Verify this is a Juicer feed size message
if (event.data && event.data.type === 'juicer:feedSize') {
var dimensions = event.data.dimensions;
// Find the Juicer iframe (adjust selector if needed)
var iframe = document.querySelector('iframe[src*="juicer.io"]');
if (iframe) {
// Only update height - width is handled by responsive design
iframe.style.height = dimensions.height + 'px';
// Optional: log for debugging
console.log('Juicer feed resized to height:', dimensions.height + 'px');
}
}
});
Complete implementation example
A full example showing the iframe and the resize script together:
<!-- Your Juicer iframe -->
<iframe src="https://www.juicer.io/api/feeds/YOUR-JUICER-FEED-NAME/iframe"
frameborder="0"
width="100%"
height="800"
style="display:block;margin:0 auto;">
</iframe>
<!-- Auto-resize script -->
<script>
window.addEventListener('message', function(event) {
if (event.data && event.data.type === 'juicer:feedSize') {
var dimensions = event.data.dimensions;
var iframe = document.querySelector('iframe[src*="juicer.io"]');
if (iframe) {
iframe.style.height = dimensions.height + 'px';
}
}
});
</script>
Customizing the script
Multiple Juicer iframes on one page
If you have more than one Juicer iframe, make the selector more specific:
Add an ID to your iframe:
<iframe id="my-juicer-feed" src="https://www.juicer.io/api/feeds/YOUR-FEED-NAME/iframe"></iframe>
YOUR-FEED-NAME(in thesrcURL) is your actual Juicer feed slug. Example: https://www.juicer.io/api/feeds/mycompany/iframe.
Then target it specifically:
var iframe = document.getElementById('my-juicer-feed');my-juicer-feed(theidattribute) is an arbitrary label you choose to target that one iframe — name it anything:main-feed,social-feed,juicer-1, etc.
Debugging
If the resize isn't working, uncomment the console.log line in the script and check your browser's console (F12) to see whether juicer:feedSize messages are arriving from the iframe.
Important notes
⚠️ This script only works with iframe embeds. If you're using the standard script embed, the feed already handles its own sizing automatically.
✅ Same-origin policy: the script uses postMessage, which is designed to work across domains, so it works even though your page and the Juicer iframe are on different domains.
✅ Width handling: the script only adjusts height. Set the iframe's width to 100% or a fixed pixel value as needed — the feed inside is responsive.
Limitations of iframe embed
Iframes give up some interactivity and have a few quirks the auto-resize script doesn't address:
The script only adjusts height. It doesn't fix uneven masonry rows, blank space between posts, or content that shifts as new posts load in.
Juicer's masonry layout intentionally produces varying row heights to optimize visual space — that's by design, but it can look uneven inside a fixed-width iframe. Custom CSS on the host page can stabilize the grid if you need uniform rows.
The pop-up post overlay (lightbox) doesn't open inside an iframe — clicking a post sends the visitor to the source platform instead.
If your site allows it, use the standard script embed instead of the iframe. The script embed handles its own sizing, integrates with the host layout natively, and avoids these quirks entirely.
If the auto-resize script is in place and the iframe still doesn't fit its content, send us the host page URL, the iframe src, and a screenshot of the over- or under-sized area through contact us.