Adjusting the width of an IFrame using CSS and JavaScript

Question

Adjusting the width of an IFrame using CSS and JavaScript

I'm trying to adjust the width of my IFrame based on the size of the browser window. However, my current code is not producing the desired outcome even after refreshing the page. Can anyone pinpoint where I am going wrong?

Here is the HTML snippet:

<p>A simple frame example:<br>
    <iframe src="www.google.com">
    </iframe>
</p>

Initially, I include a stylesheet that functions correctly except for this particular aspect:

iframe
{
<script>
    if (window.innerWidth<800px)
    {
    width="200";
    }
    else
    {
    width="400";
    }
</script>
height="400";
}

Any suggestions on how I can enhance this setup?

javascript html css

Answer 1

Answer №1

Using JavaScript within CSS is not possible. Instead, you can utilize media queries to address the issue.

@media all and (max-width:800px) {
    iframe {
        width: 200px;
    }
}

@media all and (min-width: 801px) {
    iframe {
        width: 400px;
    }
}

Answer 2

Using JavaScript within CSS is not possible. Instead, you can utilize media queries to address the issue.

@media all and (max-width:800px) {
    iframe {
        width: 200px;
    }
}

@media all and (min-width: 801px) {
    iframe {
        width: 400px;
    }
}

Answer 3

Answer №2

It is recommended to use css media queries for changing the width of an element. However, if you prefer to do so using JavaScript, you can listen to the onresize window event and adjust the width inside the event handler.

Don't forget that I included an id for the iframe for easy selection in your JavaScript code.

Here's how you would structure it in HTML:

<iframe id="myIframe" src="www.google.com"></iframe>

And here's the corresponding JavaScript code:

(function() {
    var iframe = document.getElementById('myIframe');
    iframe.height = 400;

    window.onresize = resizeIframe;

    function resizeIframe() {
        if (window.innerWidth < 800) {
            iframe.width = 200;
        }
        else {
            iframe.width = 400;
        }
    }
}());

You can also view a live example of this implementation on jsfiddle.

Answer 4

It is recommended to use css media queries for changing the width of an element. However, if you prefer to do so using JavaScript, you can listen to the onresize window event and adjust the width inside the event handler.

Don't forget that I included an id for the iframe for easy selection in your JavaScript code.

Here's how you would structure it in HTML:

<iframe id="myIframe" src="www.google.com"></iframe>

And here's the corresponding JavaScript code:

(function() {
    var iframe = document.getElementById('myIframe');
    iframe.height = 400;

    window.onresize = resizeIframe;

    function resizeIframe() {
        if (window.innerWidth < 800) {
            iframe.width = 200;
        }
        else {
            iframe.width = 400;
        }
    }
}());

You can also view a live example of this implementation on jsfiddle.

Adjusting the width of an IFrame using CSS and JavaScript

Answer №1

Answer №2

Similar questions

How to make views in React Native adjust their size dynamically in a scrollview with paging functionality

What are some ways to utilize CSS variables for enhancing component styles within Svelte?

How can the parent div adjust its height to match the tallest child div?

The ng-bootstrap modal fails to appear when incorporating [formGroup]="FormName" or formControlName="elementName"

Importing an external JSON file into a ChartJs chart

I've encountered an issue when attempting to use innerHTML for DOM manipulation

I am attempting to obtain the sum using the return function, but I am having trouble getting it to work. Would you be able to assist me in identifying what mistake I am

"What is the best way to retrieve the name of the object passed in a function in

Using Jquery to dynamically load an aspx page into a specific div element

How to use image blob in Angular JS?

Retrieve the user's unique identification number upon creation and proceed to update the database accordingly

There are three dropdown menus in my form, and the options available in each one are based on the choices made in the

Refusing to handle HTTP requests in Node and Express API for MongoDB interactions

Can someone explain the significance of '{}' within the function shown below?

How can I show the remaining paragraph text upon clicking a button in a responsive manner using CSS and JavaScript?

ng-table Filtering with dropdown selection

Inject some vibrancy by incorporating color in the space between the navbar and banner on the

Extracting Query Parameters from a Successful Ajax Call in Javascript

Move the search bar to the left side of the screen instead of the

Utilizing Django templates to display a dictionary containing nested tuples