iFrames Messing Up Your Mobile Experience?

One thing about embedding content from Google Maps, YouTube, Vimeo, Wistia, Flickr and other sources is they have all switched to iFrames (didn’t iFrames die out in the 90’s?). I wish someone could tell me why they are going away from the future instead of embracing it; but for now we have to deal with it.

3 reasons this sucks…

  1. iFrames need the size specified in exact pixels in the iFrame tag itself, which breaks mobile layouts.
  2. iFrames can’t be universally fixed with CSS because each embedded object needs a different CSS entry. (IE: YouTube needs a 30px top padding, Google Maps needs 8px, etc.)
  3. iFrames are serious lame… since IE:6 lame.

Here are some ways you can fix these issues…

First lets create a div for all iFrames:

div class="mobilefix"

Now we’ll create few CSS entries to repair 90% of the damage:

.mobilefix {
    position: relative;
    height: 0;
    overflow: hidden;
}
.mobilefix iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
}

This will fix everything but your individual viewports for each service. From here on out we will be adding only padding rules. So now we need to make rules for each service…

Google Maps

Create your secondary class:

div class="mobilefix gmaps"

Now create the CSS – Padding rules for Google Maps are as follows…

Look at the Height and Width in the iFrame code. Divide the Height by the Width and turn that into a percentage. Example:

iframe src="http://somewhe.re" height="800" width="1000"

In this example the equation looks like this: 800 ÷ 1000 = 0.8 (80%)
Now your padding looks like this:

.mobilefix.gmaps {
padding:0 0 80% 0;
}

YouTube

Create your secondary class:

div class="mobilefix youtube16x9"
or
div class="mobilefix youtube4x3"

Now create the CSS – Padding rules for YouTube are as follows…

If a video is 16×9 then the padding looks like this:

.mobilefix.youtube16x9 {
padding:35px 0 56.25% 0;
}

If a video is 4×3 then the padding looks like this:

.mobilefix.youtube4x3 {
padding:35px 0 75% 0;
}

Etc… etc…

Like I said, every service will require different settings so tinker with Vimeo and others until they are right for your site. Good luck and if you find something that works better please Tweet me up.

Leave a Reply

Your email address will not be published.