I am embedding an video in a parent website where the iframe is a bit longer than the div.
PLease refer to the image below:
If we consider the iframe as the filled portion, and div as the non filled portion, we can see that the iframe is exceeded the div and also the iframe outside the div is not even visible. Can any one suggest a iframe css change so that i can apply to it? I cant change the div as it is not controlled by me (a third paty website to embed my videos) and also i can not apply javascript to the iframe for the same reason. I just can apply css to adjust the size of the iframe.
iframe code below:
<iframe style="width: 500px; height: 100%;" title="test" src="/my/src/video" ></iframe>
i have tried to change the width:100%, but the issue exists. Can anyone please suggest.
Try
<iframe width="100%" style="height: 100%" title="test" src="/my/src/video" > </iframe>
Related
Lets say that I have an iframe that renders some html that I provide. The iframe has a fixed height. It renders what it can inside it's height and shows scrollbar for the rest.
My question is, how can I fetch the html contents of the iframe that are visible in the viewport using javascript.
I only want to get the contents that are visible, not the ones that are hidden under the scroll.
i.e. I only want to fetch the marked contents as a javascript document
Have you tried the scrolling="no"?
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>
I'm trying to embed https://ncase.me/remember/sims/ebbinghaus/?mode=0 onto a page using an iframe. However, when I do, it does not display any of the interactive elements. See https://codepen.io/UYasher/pen/yLXaPeo for the behavior in an iframe:
<iframe
style="width: 600px; height:370px;"
will_source="https://ncase.me/remember/sims/ebbinghaus/?mode=0"
scrolling="no"
class="simulation"
src="https://ncase.me/remember/sims/ebbinghaus/?mode=0"
>
</iframe>
How can I fix this issue so that the iframe shows all the elements present on the original page?
What I think is causing the issue:
I think this occurs because the iframe is unable to load the scripts at the bottom of ncase.me page. I don't understand why this is, though, as javascript appears to work in some iframes. For example, in order for google maps to run, scripts in the contents of the iframe need to be loaded and run.
I have a reCaptcha in an iframe on my page. The reCaptcha changes it size, but the iframe not. This does not look nice. The users need to scroll now. I saw a few topics that address this problem. They work if the content stays the same during page load. But they do not work if the content changes when the page is loaded, this is happening in my case.
So my question is: how do I make an iFrame adjust size when the page is loaded using only html, css and if needed javascript . This is my html code:
<div>
<iframe aura:id="vfFrame" src="/partners/B2B_ReCaptcha" frameborder="0" width="100%"
allowtransparency="true" />
</div>
Any tips on how to tackle this problem?
So I have a form that I built with Google Docs because it seemed easier than going from scratch. I've gotten this to work by copy-pasting the code from google's page to one on my domain.
I managed to get it to auto-size its height with this lovely little script I found here: http://www.frontpagewebmaster.com/m-89000/tm.htm (this is not another thread about HOW to dynamically resize an iframe)
function changeContent() {
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
and the iframe on MY displayed page:
<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>
But now when I hit submit, the confirmation or error page opens in the _parent window (might be _top) - instead of in the iframe (_self, which is supposed to be the default?). target="" is depreciated and doesn't work. This also happens with ANY link inside the iframe.
I've tried a couple different resize scripts, but I don't know enough to figure it out? Or the code doesn't actually work for my purposes? I'm not sure... Here's what I have working: http://fiendconsulting.com/60minutedesign/form-embed.html
What I need: Something that resizes the iframe content on first load of the Parent page and which opens all links in their _self frame/page/whatever.
What I don't care about: Resizing the iframe to fit the content of subsequent pages. If I click a link inside the iframe, I don't need the iframe to resize to whatever page I just went to.
I'm a self-taught programmer and I have some interesting gaps in my knowledge. I also just started learning JS and PHP and am at the Read, Comment and Cannibalize stage. It's better to assume I don't know, and it would help me a LOT if you told me where to Put the code (which document and where in the document). :)
I'm unsure of what you are trying to do because the links you provided do not seem to work; however, I believe your problem might be because of your resize function.
Your function:
function changeContent() {
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
You take the element 'contentDiv', you take the HTML of your 'iframe' and then you set the same to your content div. This results in your 'iframe' not existing any more.
For example:
let's say my content div had this:
<div class="right" id="contentDIV">
<iframe id="contentFRAME" src="raw-form.html" name="contentFRAME" onLoad="changeContent()" style="height:0; width:0; border-width:0;">Loading...</iframe>
</div>
My iframe has only 1 link: Example Link
After your function, your contentDiv now looks like:
<div class="right" id="contentDIV">
Example Link
</div>
you have effectively removed your iframe and put the contents of the iframe (the link) into your main div. Now if you click on the element, it'll automatically open on the same page - i.e. the 'parent' but there is no parent anymore!
So going forward, you should not be replacing the content; instead you should be modifying the height/width of the iframe. Have a look at:
Adjust width height of iframe to fit with content in it
I am loading an aspx web page in an iframe within the same domain/protocol as the parent/container page. The content in the Iframe is sometimes of more height than the iframe itself. I do not want to display scroll bars on my Iframe.
I need to resize the height of the Iframe based on the wrapper 'div' tag inside the aspx page that the iframe will contain.
Below is the jquery i had written to achieve this:
$("#TB_window", window.parent.document).height($("body").height() + 50);
'TB_window' - the div in which the Iframe is contained.
'body' - the body element of the aspx in the iframe.
This script is attached to the iframe content. i am getting the TB_window element from the parent page.
while this works fine on Chrome, but the TB_window collapses in firefox.
I am really confused/lost on why that happens.
Can anyone offer any advice on how i can handle the situation better??
Your help will be highly appreciated
Thanks
You have to use manage some event on your iframe
<iframe id="iframe" src="xyz" onload="FrameLoad(this);"
onresize="FrameLoad(this);" scrolling="no" frameborder="0">
</iframe>
function FrameLoad(ctrl) {
var the_height = ctrl.contentWindow.document.body.scrollHeight;
$(ctrl).height(the_height)
}
also use for cross browser
document.domain = document.location.hostname;
in both parent page and child page
If the difference is not that big you can add
overflow:hidden
to the css class
this doesn't resize the window but could be what you're searching for.