Make all iframes in a page responsive, keeping aspect ratio from width/height attributes

responsify-embeds.js

function responsifyEmbeds() {
  var iframes = document.getElementsByTagName("iframe");
  for (var i = 0; i < iframes.length; i++) {
    var iframe = iframes[i];
    var parent = iframe.parentNode;
    var wrapper, width, height;
    
    // ignore iframes with "100%" width (those are presumed to be responsive enough already)
    if (iframe.getAttribute("width") !== "100%") {
      
      // if it isn't already the case, wrap iframe in .embed-container div
      if (parent.classList.contains("embed-container") === true) {
        wrapper = parent;
      } else {
        wrapper = document.createElement("div");
        wrapper.className = "embed-container";
        parent.replaceChild(wrapper, iframe);
        wrapper.appendChild(iframe);
      }
      
      // parse width and height attributes as integers, unless they're percentages
      if (iframe.hasAttribute("width")) {
        width = iframe.getAttribute("width").indexOf("%") !== -1 ? false : parseInt(iframe.getAttribute("width"));
      }
      if (iframe.hasAttribute("height")) {
        height = iframe.getAttribute("height").indexOf("%") !== -1 ? false : parseInt(iframe.getAttribute("height"));
      }
      
      // if width and height attributes are both integers, define a custom aspect ratio
      if (width && height) {
        var ratio = height / width;
        wrapper.style.paddingTop = (ratio * 100) + "%";
      }
    }
  }
}

style.css

.embed-container {
  position: relative;
  padding-top: 56.25%; /* Default to 16:9 ratio */
}

.embed-container > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}