CSS/HTML Dynamically Resizing Iframe through Javascript

Question

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?

Since your css is already in percentages, why do you need to explicitly resize it? Also, doesn't the private float give you errors? Or are you compiling your code? private float x isn't valid javascript variable syntax. — Shilly
– Shilly, Commented Jun 9, 2017 at 13:11
I changed the private float to var and it still doesnt work. — Callum Williams
– Callum Williams, Commented Jun 9, 2017 at 13:16
object.style.width is undefined, so your height gets set to 0 all the time. Do you have a diff vid btw? copying your code floods me with errors in the bootstrap used by the vid. You might have to have a fixed height to begin with to get this to work. Have you tried using css classes instead fo directly putting a style attribute? — Shilly
– Shilly, Commented Jun 9, 2017 at 13:23

Steve G · Accepted Answer · 2017-06-10 12:15:27Z

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.

guest · Accepted Answer · 2017-06-09 13:43:45Z

0

You should add px.

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

answered Jun 9, 2017 at 13:43

guest

7047 silver badges15 bronze badges

Collectives™ on Stack Overflow

CSS/HTML Dynamically Resizing Iframe through 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