JavaScript: Making a Responsive Size Embedded Video

There are ways of doing that using CSS. But, for JavaScript adventure, let's go do it with JavaScript.
It will work for any iframe (or other element) with constant ratio of dimensions.

---

STEPS
Usually, we get an iframe code from a certain video host.
For instance:

<iframe src="...." frameborder="0" [...other attributes...]></iframe>

If it has no id attribute attached, then declare it. Also, declare the class for the styling.

Like so:

<iframe id="the_element" class="the_element" src="..." ...></iframe>

If it has already had the id attribute, well, then just use that keyword for the script below. Add the class attribute.

Delete the height=... and width=... attributes from the iframe, because we'll use our own thingy. Also, delete other attributes, such as frameborder (it can be substituted with border: 0 in CSS) and maybe others.
We only need the src, id, and class attributes.

THEN...

1. Declare the default dimensions in CSS. It's better if using class selector (that's why I put it as the intro above). For instance:

   .the_element {width: 640px; height: 360px; border: 0;}

2. Later on, we'll meet some methods in JavaScript:
   • style
     Useful for setting the element CSS particular property.
     It can also get a CSS property, but it (the property) must be already defined inline in the element, like: style="something:something; other:other". Thus, not recommended for get method.
   • window.getComputedStyle(the_element, null)
     To get the computed styling of a certain_element. It's an object with plenty of CSS properties. We're just gonna get the width from it.
   • getPropertyValue("css_property")
     Combined (using dot) with the previous method, this will return a particular css_property value.
     For width property, this method will return the numeral value and the px unit. Therefore, we'll also need parseInt method to get only the number.
   • cssText
     Combined with style above, this (new) method can be used to declare multiple styling properties.
   • window.innerWidth
     To get the current window width.
   • addEventListener
     This will be used to "listen" the browser's window resize event.
   • Math.round()
     Rounding (up or down) a number to the nearest integer.

---

JavaScript

Details:

• You'll need to define the_element input. The iframe of the embedded video.
• This is using 16 : 9 aspect ratio dimensions.
• The default width is 640px. And it has 360px of default height.
• There are few other things you'll need to change in this to suit your page design. You can read the commentaries.
• This will work for one embedded video. You can expand this basic idea yourself (in JavaScript).

var rv = { w: window, css: function (a) { "use strict"; return rv.w.getComputedStyle(a, null); }, re_size: function (a) { // The received input is the embedded video iframe DOM element object. Wut? Yes. "use strict"; var all_properties, height, width, default_height = "360px", // Change this default height to fit your layout. default_width = "640px ", // Change this default width to fit your layout. window_width = rv.w.innerWidth; if (window_width < 640) { // Change this to fit your page. This is less than 640px window width. a.style.cssText = "box-sizing:border-box; width:100%"; // Set box-sizing property and 100% width. all_properties = rv.css(a); // Get all CSS properties of the iframe. width = parseInt(all_properties.getPropertyValue("width"), 10); // Get the pixel unit of percentage-set width. height = Math.round(width * (9 / 16)); // Calculate the height value. 16 : 9 aspect ratio. Change this if needed. a.style.height = height + "px"; // Set the height. } else { a.style.height = default_height; // Set default height. a.style.width = default_width; // Set default width. } } }; /*| The embedded video iframe DOM element object (input). **| You'll need to define *the_element* (the argument input). **| Based on the example above (*the_element* keyword): **| var the_element = document.getElementById("the_element"); **| ========================================================================== **| INVOCATION **| Run function *re_size* from *rv* variable: *rv.re_size(argument)*. **/ rv.re_size(the_element); // On DOM load event. rv.w.addEventListener("resize", function () { // *rv.w* is window declared above. "use strict"; rv.re_size(the_element); }); // On window resize event.

---

DEMO FOR ONE IFRAME

At THOR

---

Multiple elements

1. We can use only class for the elements. Then iterate through all of them to switch the dimensions.
2. They must have default same dimensions. So that it will be easier to get the reference for calculation.
3. Then you can add CSS for collapsing/expanding layout. It depends on how your thingy looks like.

---

DEMO FOR MULTIPLE IFRAMES

This is an example of that

---

In conclusion...
Well... Hm.
There are two ways for making a responsive iframe. Through purely CSS and the combination of small amount of CSS and larger amount of JavaScript.
The last option is neat for browser scripting exercise.