Tuesday, 10 January 2017

Building responsive IFrames

To scale a YouTube video to fit any browser or tablet/mobile device for responsive design you can use either a CSS or Javascript solution to accomplish the goal.
This example uses a CSS solution, you need to add a couple of CSS styles in your main CSS file.

The Process

The first thing that you need is the YouTube iframe embed code, grab that in your video share options from the YouTube site.
Place the iframe code on your page, in this example above the iframe's container div (div.youtubevideowrap) has 2 CSS declarations for width, it has a width:80% and a max-width:640px.
This makes the content fluid as a percentage unit is used, it also has a max-width set as I don't want the video displaying wider than 640px
From here we need to add in a HTML container around the video and declare the CSS.

Setting Up the HTML and CSS Styles

Create a container div around the iframe code and give it a class eg:
<div class="video-container"><iframe.......></iframe></div>
Add in the CSS:
.video-container {
 position:relative;
 padding-bottom:56.25%;
 padding-top:30px;
 height:0;
 overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}
The first CSS declarations target the video container and the second target what is in the container, in this case it's the iframe, you can also apply this to objects and embed elements.
That's it the video will now scale as the viewport is resized, the magic element is the padding-bottom rule of 56.25%, this figure is reached by using the video's aspect ratio of 16*9, so 9 divided by 16 = 0.5625 or 56.25%, full explanation in alistapart article.
This same process can also be achieved using a javascript technique explained in the Vimeo video guide, which plays just as friendly with YouTube videos.

 Proportionally resizing the site content to another device can be frustrating!


Building responsive IFrames can be frustrating. Don't let an IFrame break your beautifully laid out responsive site. Learn how to build responsive IFrames the right way with just a few lines of CSS.

You’ve spent countless hours designing and building the perfect responsive site. One problem — iframes. Proportionally resizing these pesky little windows to another world can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container. Rather, making the height resize accordingly can be tricky.
So how do you keep from blowing your top trying to make responsive iframes?


Most implementations I’ve seen require the use of JS, like Pym.js. This can cause unexpected behavior depending on the device and browser version — Pym.js only goes back to IE9. Wouldn’t it be nice if there was a way to make responsive iframes without using a dirty little code snippet? There is! It’s name is the CSS intrinsic ratio technique — or what I like to call, ‘Magic iframes!’.

Responsive IFrames Demo

With just a little CSS and HTML, you can build a responsive iframes — even if the dimensions vary! Check out the demo below:

Responsive IFrames Using CSS

In “Resize Videos Proportionally“, we learned how to use the intrinsic ratio technique to make your embedded videos responsive. We’ll use that same method and apply it to make any iframe, YouTube & Vimeo video or Google Map responsive. Only dependency is you know the aspect ratio (width x height) of the iframe.
When embedding iframes for content such as videos, most services like YouTube and Vimeo will provide you a snippet of code like the one below:
1
<iframe width="560" height="315" src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
Notice I removed the frameborder attribute. If you’re using HTML5, that attribute is no longer supported.

The Code

First of all, remove the width and height attributes. Keeping those attributes forces the content to stay at that size regardless of the screen size. This causes problems in responsive layouts when the screen size is smaller than the width of the iframe. Though we could use CSS to force the size, why have them if their not being used — less code is beautiful code.
1
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
Next, let’s add a container with a class around the iframe:
1
2
3
<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
Now, we add a little touch of CSS magic to make the iframe responsive. Same way we did in the “Resize Videos Proportionally with Intrinsic Ratios”.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
IMPORTANT: Don’t forget to apply a aspect ratio class to your iframe. If you don’t, it could cause the iframe to disappear.
That it! Simple, huh? Your iframe should now proportionally resize based on the browser size. Here’s a breakdown of how it works:

Breaking It Down

  • It’s key to specify the container’s position to be relative. This allows us to absolutely position the iframe within it, which is needed to make it responsive.
  • The padding-bottom value is calculated based on the aspect ratio of your content. Instead of adding it to the intrinsic-container class, we added separate classes that can be appended to that element depending on the type of content you’re embedding. I prefer doing this so I’m not duplicating the container code for different aspect ratios. To find the aspect ratio of a container, use this formula: height ÷ width = aspect ratio
  • height is set to 0 because padding-bottom gives the iframe it’s height.
  • Using overflow: hidden is important because it ensures if any content does protrude outside of the container, it will be hidden and avoid screwing up the sites layout.
  • Like with most absolute positioned elements, we need to set the top and left properties so the iframe get’s put in the right place.
  • Finally, width and height are set to 100% so the iframe takes up 100% of the containers space.

Using SASS?

If you’re using SASS, use this function to find the ratio or padding-bottom of the parent container:
1
2
3
4
5
6
7
/**
 * Ratios
 * Returns the ratio for specified dimensions.
 */
@function ratio($width, $height) {
  return percentage( $height / $width);
}
Taking that one step further, you can create a mixin to generate ratio classes:
1
2
3
4
5
6
7
8
9
10
11
@mixin generateRatios($width, $height, $prefix: "ratio-") {
  $class-name: $prefix + $width + "x" + $height;
  .#{$class-name} {
    padding-bottom: ratio($width, $height);
  }
  // Output example: .ratio-16x9 {}
}
@include generateRatios(16,9); // 16x9
@include generateRatios(4,3);  // 4x3
We can use this same technique to make other types of embedded content responsive like Google Maps & Calendars. Basically, anything that uses a iframe using only CSS! If you don’t have access to edit the site stylesheets directly, here’s a nifty tool that will generate responsive embed codes for you.

Responsive IFrames Using JS

What if you don’t know the aspect ratio? Let’s say you have content authors creating interactives with each having different dimensions. Without knowing the aspect ratio of the iframe, it’s not easy to implement the intrinsic ratio technique.
You can overcome this problem by using JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Find all iframes
var $iframes = $( "iframe" );
// Find &#x26; save the aspect ratio for all iframes
$iframes.each(function () {
  $( this ).data( "ratio", this.height / this.width )
    // Remove the hardcoded width &#x26; height attributes
    .removeAttr( "width" )
    .removeAttr( "height" );
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
  $iframes.each( function() {
    // Get the parent container&#x27;s width
    var width = $( this ).parent().width();
    $( this ).width( width )
      .height( width * $( this ).data( "ratio" ) );
  });
// Resize to fix all iframes on page load.
}).resize();

Let’s Sum It Up!

Say Goodbye to embedded content breaking your layouts with the intrinic ratio technique. We’ve walked through how just a little bit of code can easily make your iframes and other embedded content responsive friendly.
How do you embed third-party content on your responsive website? Do you have a nifty technique or trick to accomplish responsive embedded content? What about your workflow for embedding content like Google Maps, YouTube, etc? I’d love to hear from you. Comment below with your thoughts.

Additional Resources

Check out these other great articles about making embedded content responsive:
Posted by at

No comments:

Post a Comment

Note: only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)

Get paid to share your links!