Iframe changing size with Javascript

Question

I need to change iframe size. This is my html code

<iframe id="stream" width="720" height="433" src="#HiddedIt" style="border:0;outline:0" frameborder="0" scrolling="no"></iframe>

And this is my Javascript:

if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth < 1100){
    document.getElementById("stream").width = "485px";
    document.getElementById("stream").height = "295px";
}

It doesn't change iframe's size when the user's resolution is lower than 1100. Can you tell where I'm doing a mistake? Thank you.

if is working but iframe's size is not changed.

Is the javascript coming before the iframe in the document flow? — ASGM
– ASGM, Commented Apr 16, 2013 at 20:19
I don't fully understand your question but Javascript is loaded regularly by <script src="stream.js"></script> — Kyrbi
– Kyrbi, Commented Apr 16, 2013 at 20:21

ASGM · Accepted Answer · 2013-04-16 20:27:18Z

I think your problem is that the Javascript is coming before the <iframe> in the HTML. The browser parses the HTML in a sequence.

Without seeing your actual document, I can only imagine that you're calling the Javascript in the <head> and creating the <iframe> in the <body>.

The problem with this is that when the Javascript in the <head> is executed, there's no <iframe> created yet, so there's no object for it to change!

One solution is to call your Javascript in the <body> after the <iframe> is created. Alternatively, you can use window.onload to run the script after the iframe has been created:

window.onload = function () {
    if (
        window.innerWidth < 1100 || 
        document.documentElement.clientWidth < 1100 || 
        document.body.clientWidth < 1100
    ){
        alert("Yes");
        document.getElementById("stream").width = "485px";
        document.getElementById("stream").height = "295px";
    }
}

Robert Bolton · Accepted Answer · 2013-04-16 20:40:01Z

0

You can use the JQuery library for Javascript to resize the IFRAME programmatically.

In the code below the value "#iframe" would be the ID of your IFRAME. Then you can plugin the height value which just sets the CSS height for the IFRAME.

$("#iframe").css("height", "50px");

You can use .css to set any CSS value.

answered Apr 16, 2013 at 20:40

Robert Bolton

6733 gold badges8 silver badges22 bronze badges

Collectives™ on Stack Overflow

Iframe changing size with Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related