Develop Reference

How to make the contents inside an iframe responsive?

I have embedded a player from a site which streams a channel using an iframe. I am able to make the iframe responsive. But the content i.e the video player inside the iframe is not adaptive to the changes in viewport. I have tried several solutions from internet but all of them make the iframe responsive but not the content inside.
Is there any way I can make the video player inside the iframe responsive?
Please note that I don't have access to the source code of the player.
Here's the link to the html file: IFrame Code (I was not able to create a working fiddle of this. So shared the file instead)

Please note that I don't have access to the source code of the player.
You are in trouble
The one major thing to know while dealing with iframe is the source of the iframe
iframe source has the same domain as the main page which renders this iframe: In this case the browser will let you put your hands on the iframe contents and manipulate it as desired. As both the main site and the iframe are unders same domain it means you are a authorized person so you can change the contents if required.
So even if you don't have access to the source code of the file there are still way's to make your contents responsive if they are in the same domain. This would require Jquery
iframe source domain is not the same as your main page which renders this iframe: In this case you cannot do much with the iframe except displaying it in your page. The browser will not allow you to change any stuff on this iframe. This is a security protocol followed in all the browsers.
what happens if at all we are given access to manipulate the contents - Eg: I can render youtube in my iframe of my website and change all the instances of the string "youtube" to my own name, thus making this entire site look like my own. Also I can manipulate the ajax calls, jquery stuff etc,etc.. and get data from the site.

How can I get a web page within an iframe to load its own JavaScript?

This is for when the page containing the iframe is on a different domain.
For example, when loading this page in an iframe ( http://bleacherreport.com/articles/1707335-5-green-bay-packer-players-who-will-surprise-in-training-camp ), the slideshow buttons will no longer work and comments will not show because the JS won't load. I've seen sites like StumbleUpon get around issues like this. How can this be achieved?

I ended up finding a simple solution.
Add allow-same-origin to the sandbox attribute of the iframe tag.
I have no idea why this works because they are different origins, but this allows the slideshow and comments to show up on bleacherreport, yahoo, and many other articles where it wouldn't before.

Stop an embedded iframe from redirecting

Is there a way to stop an embedded iframe from being clickable or make the entire iframe clickable? I want the iframe to pull the data, but I don't want visitors to be able to click the iframe and be redirected from only one spot on the iframe.
Is that possible? Here's an example of the iframe:
<iframe src="http://www.indiegogo.com/project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>
http://jsfiddle.net/qX4fu/

As your iframe is obviously served by another domain, standard solutions cannot be used. You can't read or modify the iframe nor its document.
But you can put an invisible div over it like this : http://jsfiddle.net/dystroy/Afg3K/
<div id=a></div>
#a{
position:fixed;
top:0;
left:0;
width:224px;
height:429px;
}​
But most of the times, those things are forbidden by the iframe inclusion contract. Look at your agreement before you do it.

It is possible, though I would not recommend it.
Messing with default browser behavior such as anchor tag clicks will generally frustrate a user and prevent them from returning to your page.
Furthermore, as dystroy stated in his answer, the legal strings attached to dropping iframes on your page usually explicitly forbids this kind of behavior.
That being said, returning false from an event handler will prevent the browser from receiving the event:
document.getElementById('yourFrame').contentWindow.document.body.onclick = function () {
return false;
};
It is worth saying that this will not work if the iframe is in a different domain than where the script is running from. If that is the case, you will need to construct a transparent overlay div that swallows the click events and absolutely position it over the iframe.
Here is a fiddle demonstrating both approaches: http://jsfiddle.net/qX4fu/1/

If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet compatible with all the browsers. http://www.w3schools.com/tags/att_iframe_sandbox.asp
In my case I just added "allow-forms" and "allow-scripts" as the sandbox property values and the embedded site no longer redirect and still can run JavaScript
ex: <iframe sandbox="allow-forms allow-scripts" ... /></iframe>
If anyone knows any Cons to using this approach I would love to know about it.
Someone else with same answer: https://stackoverflow.com/a/9880360/1404129 (I ran into this answer later)

Find Child in iFrame?

I am trying to achieve this:
I am working on a script that checks a Page for iFrames(done), but than it tries to find the VIDEO Tag of HTML5 in it, store its source, than remove the iframe and replace it by a new VIDEO Tag created with the previously retrieved source, the script shall grab the Element from cross domain Sites like YouTube e.g.
So currently I was able to find all iFrames via getElementB
and btw: JavaScript ONLY

It is impossible to do it cross domain because JavaScript has the same origin policy that prevents accessing the content from different domains.

As mentioned within another answer, this is not possible to do in a cross domain setup.
If this is not an issue, you can access the document of the iframe using the following:
var iframeElmnt = documentGetElementsByTagName('iframe')[0];
var iframeDocument = iframeElmnt.contentWindow.document;
var videoElmnts = iframeDocument.documentGetElementsByTagName('video');
You can then hunt through the videoElmnts to figure out which one you should insert into the current page.

Gathering location of an IFRAME

I am building a script/application (on client side and on proxy site too) that gathers information about elements from various web-sites.
One last thing that makes me troubles is gathering location of an IFRAME. Let me explain this in more details:
Invariant: Location of IFRAME is not changed via user interaction
Some web-pages uses SRC attribute to define location of new IFRAME - either defined via scripting or manually typed in the source - this is ok (no problem)
Other web-pages uses various techniques how to populate IFRAME dynamically and they do not use SRC attribute of IFRAME - this is ok if location of such IFRAME is inside the same domain, otherwise it is unsafe access to other domain
I will include one example of HTML code:
<html>
<body>
Click here to open an iframe.
<br>
<iframe id="test_iframe" name="test_iframe"></iframe>
</body>
</html>
So if I try by JavaScript this below I will get an empty string.
document.getElementById("test_iframe").src
And if I try to use this below I will get a security error.
document.getElementById("test_iframe").conentDocument.location.href
So my question can be reduced to:
Are there any technique to gather location of such IFRAME which content is outside parent domain and that IFRAME is without SRC attribute?
Thank you very much for your answers :-)

This is called iframejailing. Its not possible to read or alter an iframe element in the page if its pointing to a different domain. Its an inbuilt security feature in browsers.
However, there are certain workarounds for this if the domains in questions can work together to create an iframe proxy (google to get more info), which i feel in this case is not applicable.
Respond back if you have more questions.