In short, the problem is this: we have a news site that has a mobile version of the website. For the page that displays whatever article is called, occasionally, there are embedded videos (from youtube) that show up in iframes. Their default size is typically something like 580px, which obviously es out far too big and wide on a mobile browser.

I wanted to use javascript to search the content and resize any iframe as it finds it. That said, I don't know if using JavaScript on mobile will be the best thing to do, and second, I'm not sure how to search for all instances of a certain element type like that. The iframes do not e in with names or IDs...

I briefly considered using PHP to search for <iframe but it seems that php, in this instance, would be unnecessarily sloppy and potentially easily broken.

Does anybody have advice/suggestions on how to handle this problem?

In short, the problem is this: we have a news site that has a mobile version of the website. For the page that displays whatever article is called, occasionally, there are embedded videos (from youtube) that show up in iframes. Their default size is typically something like 580px, which obviously es out far too big and wide on a mobile browser.

I wanted to use javascript to search the content and resize any iframe as it finds it. That said, I don't know if using JavaScript on mobile will be the best thing to do, and second, I'm not sure how to search for all instances of a certain element type like that. The iframes do not e in with names or IDs...

I briefly considered using PHP to search for <iframe but it seems that php, in this instance, would be unnecessarily sloppy and potentially easily broken.

Does anybody have advice/suggestions on how to handle this problem?

• javascript
• html
• mobile

3 Answers 3

Using jQuery it's very easy to select elements based on tag.

jQuery:

$('iframe').width(300);

Fairly easy using normal DOM as well.

var iframes = document.getElementsByTagName('iframe');
    for (var i=0; i<iframes.length; i++)
    {
      iframes[i].style.width = "300px"
    }

Using jQuery, resizing all iframes on a document would be as simple as typing, for example,

$('iframe').css('width', '200px');

Sure, jQuery has an overhead in terms of size, but minified and gzipped, its footprint is not so large, even for mobile applications.

This worked for me:

Just include the width margin you want at the top:

//Just Change this
var margin = "20";
//////////////////////////////////////////////////////
var iframes = document.getElementsByTagName('iframe');
var w = window.innerWidth || document.body.clientWidth;
var newwidth = w - ( 2 * margin );

for (var i=0; i<iframes.length; i++)
{
 var currentheight = iframes[i].height;
 var currentwidth  = iframes[i].width;  
 var newheight = (newwidth / currentwidth) * currentheight;

  iframes[i].style.width = newwidth+"px";
  iframes[i].style.height = newheight+"px";
}