.container
  .row
    .col-sm-12.text-center
      h1 Auto-scaling iframes
      p
        != 'The nature of iframes is to be static and unflexible.'
        br
        strong Let's make them responsive!
.container
  .row
    .col-sm-4
      h2 33% iframe
      iframe(width="800" height="600" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003")
    .col-sm-8
      h2 66% iframe
      iframe(width="800" height="600" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003")
  .row
    .col-sm-6
      h2 50% iframe
      iframe(width="800" height="600" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003")
    .col-sm-6
      h2 50% iframe (16:9)
      iframe(width="800" height="450" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003")
.container-fluid
  .row
    .col-sm-12
      h2 100% iframe (4:1; full-with)
      iframe(width="800" height="200" frameborder="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6392906210613!2d-122.08624618424679!3d37.42199987982524!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sde!2sch!4v1479590858003")
      

// Auto-scaling iframes
//-----------------------


// VanillaJS version

function iframeAutoScale() {
  
  'use strict';
  
  var
    iframes = document.getElementsByTagName('iframe'),
    index = 0;

  if (iframes.length > 0) {
    for (index = 0; index < iframes.length; index++) {
      var
        iframe = iframes[index],
        parent = iframe.parentElement,
        parentPadding = parseInt(window.getComputedStyle(parent, null).getPropertyValue('padding-left')) + parseInt(window.getComputedStyle(parent, null).getPropertyValue('padding-right')),
        parentWidth = parent.clientWidth - parentPadding,
        ratio = 0.75,	// default ratio (4:3)
        width = iframe.clientWidth,
        height = iframe.clientHeight;

      // overwrite default ratio if width and height attributes are not set
      if (width !== undefined && height !== undefined) {
        ratio = height / width;
      }
      
      iframe.setAttribute('width', parentWidth);
      iframe.setAttribute('height', parentWidth * ratio);
    }
  }
}

// onload
document.addEventListener('DOMContentLoaded', function () { 
  iframeAutoScale();
}, false);

// on window resize
window.onresize = function(event) {
  iframeAutoScale();
};



// jQuery Version

/*
function iframeAutoScale() {
  
  'use strict';
  
  $('iframe').each(function () {
    var
      parentWidth = $(this).parent().innerWidth(),
      ratio = 0.75,	// default ratio (4:3)
      width = $(this).attr('width'),
      height = $(this).attr('height');

    // overwrite default ratio if width and height attributes are not set
    if (width !== undefined && height !== undefined) {
      ratio = height / width;
    }

    $(this).attr('width', parentWidth);
    $(this).attr('height', parentWidth * ratio);
  });
}

// onload
$(document).ready(function () {
  iframeAutoScale();
});

// on window resize
$(window).resize(function () {
  iframeAutoScale();
});
*/