Monkey Raptor

Monday, May 18, 2015

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).

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.
JavaScript: Making a Responsive Size Embedded Video
http://monkeyraptor.johanpaul.net/2015/05/javascript-making-responsive-size.html

No comments

Post a Comment

Tell me what you think...