Archived topic
Setting the Hight & Width of an embeded iFrame
1 reply · Started by Joe on November 4, 2020
I'm using google word docs as embedded iframes on pages. I am unable to set the appropriate width and height of the iframes so they display properly on each page. I have added a link to one of the pages that shows how narrow each iframe is. I have tried modifying iframe size with css but no luck. how do I get the iframe to display properly and use the entire section instead of leaving so much white space on either side?
Hi,
Iframes are technically a separate webpage you display within your webpage. It's like opening a browser window within your page. You can't control how it displays by normal means.
That said, custom script may work but I'm afraid that is out of GeneratePress' scope of support.
But, for the sake of helping you out, try this javascript:
var iframe = document.getElementsByTagName('iframe')[0];
iframe.addEventListener("load", function() {
window.frames[0].document.body.style.width = '100%';
window.frames[0].document.getElementById("contents").style.padding = '100px 0% 50px 0%; !important';
});We're basically styling the iframe when it loads using javascript here. I'm afraid it's not guaranteed to work.
You can add this script using Code Snippets btw.
