How to make Iframe and other embedded content behave responsively?

It’s easy to make an iframe’s width dimension to 100% of its container, but sizing it’s height is tricky — especially if the content of the iframe changes height depending on page width within the iframe.


<div class="responsive-container responsive-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

To achieve responsive iframe we can use following CSS codes.

The key idea is to specify the parent container’s position to be relative. This allows to absolutely position the iframe within it, which is needed to make it responsive.


responsive-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
/* 16x9 Aspect Ratio */
.responsive-container-16x9 {
  padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.responsive-container-4x3 {
  padding-bottom: 75%;
}
.responsive-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

Iframe should now proportionally resize based on the browser size.

Other Techniques:

Use of Pym.js:

Pym.js embeds and resizes an iframe responsively (width and height) within its parent container. It also bypasses the usual cross-domain issues.

Fix using Jquery:


var $iframes = $( "iframe" );
// Find and save the aspect ratio for all iframes
$iframes.each(function () {
  $( this ).data( "ratio", this.height / this.width )
    // Remove the hardcoded width and height attributes
    .removeAttr( "width" )
    .removeAttr( "height" );
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
  $iframes.each( function() {
    // Get the parent container's width
    var width = $( this ).parent().width();
    $( this ).width( width )
      .height( width * $( this ).data( "ratio" ) );
  });
// Resize to fix all iframes on page load.
}).resize();
Continue Reading

What are the important data visualization Applications?

Important data visualization Applications:

Data Voyage (Visualization browser)

Visualization browser for open-ended data exploration building on top of Vega-Lite.
Start exploring data by examining each field and continue by selecting interesting data fields in
data selector panel.

Online Demo:
Voyager

Repository:
Voyager Repository

Lightbeam

It is a Firefox add-on that uses interactive visualizations to show you the first and third party sites you interact with on the Web.
Lightbeam

Socilab

It allows users to visualize and analyze their LinkedIn network using methods derived from social-scientific research.
Socilab

Cytoscape

Cytoscape is an open source software platform for visualizing complex networks and integrating these with any type of attribute data.
cytoscape

Datavizcatalogue

Complete list of data visualization
Datavizcatalogue

Continue Reading