CODEWITHSUNDEEP
javascripthtmlcssiframe
Callum Williams
Callum Williams

Reputation: 9

CSS/HTML Dynamically Resizing Iframe through Javascript

In my HTML code, I'm setting my Iframe width value to 95% of the width. I want the height to dynamically resize according to the set aspect ratio. I have made a javascript script to try the dynamically resizing but when i run my HTML it doesn't resize the height.

Here is my html for the iframe:

<div class="video">
    <tr>
        <td>
            <iframe src="https://embed.theguardian.com/embed/video/news/video/2016/dec/27/cassetteboy-remix-the-news-2016-review-special-video" scrolling="no" onload="resizeiframe(this);" allowfullscreen></iframe>
        </td>
    </tr>
</div>

Here is my css:

    .video {

    }
    .video iframe {
        align: center;
        width: 95%;
        margin-top: 180px;
        float: top;
        position: relative;
    }

and here is my javascript:

<script>
    //this is javascript
    //it is used to dynamically resize the height of the iframes based on screen width
    function resizeiframe(object) {
        //assign the aspect ratio to a variable
        private float aspectratio = (6/19);
        //set the objects height to the object's width multiplied by the aspect ratio
        object.style.height = (object.style.width * aspectratio);
    }
</script>

Can anyone help?

Upvotes: 0

Views: 976

Answers (2)

Steve G
Steve G

Reputation: 13452

Two Solutions

First, you had a few issues with your original JS:

  • You were not getting the width of the iframe correctly (use element.offsetWidth or the like)
  • You need to assign the unit when setting a width (px, etc.)
  • You were typing aspectratio incorrectly as private float instead of var or private aspectratio: number; (Typescript) -- unless you are using another superset JS language and it wasn't tagged in the question.

JavaScript: (Modification to your original)

      function resizeiframe(object) {
          //assign the aspect ratio to a variable
          var aspectratio = (6/19);
          //set the objects height to the object's width multiplied by the aspect ratio
          object.style.height = (object.offsetWidth * aspectratio) + "px";
      }

      // This is just quick and dirty to grab the element -- do something better
      resizeiframe(document.getElementsByTagName("iframe")[0]);

Working Plnkr

Doing this via JavaScript may also require that you call resizeiframe on window.resize to compensate for user's resizing of the browser window.

OR

This can also be accomplished with a CSS-Only solution (no JavaScript needed), if you're not against using vw (viewport width units) instead of px (pixels).

CSS:

  iframe {
    width: 95vw;
    height: calc(95vw*(6/19));
  }

HTML

<iframe src="https://embed.theguardian.com/embed/video/news/video/2016/dec/27/cassetteboy-remix-the-news-2016-review-special-video" scrolling="no" onload="resizeiframe(this);" allowfullscreen></iframe>

Working Plnkr

With this solution, browser resizing is handled automagically.

Note: In both solutions, I removed .video wrapper element to simplify the answer, but this can be easily added back.

Upvotes: 1

guest
guest

Reputation: 704

You should add px.

object.style.height = (object.style.width * aspectratio) + "px";

Upvotes: 0

Related Questions