Question

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 comes 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 come 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?

Answer 1

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"
    }