Responsive IFRAMEs

The HTML To make your IFRAME responsive you'll need to wrap it in a  <div> : < div class = " iframe-container " ...

The HTML

To make your IFRAME responsive you'll need to wrap it in a <div>:

<div class="iframe-container">
  <iframe width="1425" height="559" src="https://www.youtube.com/embed/BS4ojxHC1EM"></iframe>
</div>

The<div> will be the frame reactive frame of reference for the IFRAME.

The CSS

The parent <div> has an interesting set of CSS:

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

The padding-top is the interesting bit; setting the padding-top to a percentage of height 9 / width 16 allows us to keep a desirable ratio.  This ratio matches a YouTube height to width ratio, but you can use any ratio to match the ratio of your IFRAME usage.

Next you define the IFRAME's CSS:

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

The IFRAME's CSS is unremarkable since the<div> does most of the work;  positioning the IFRAME as absolute and setting its width and height to 100% constrains the element to the DIV's reactive dimensions.

The CSS above is all it takes to turn a problematic, static IFRAME into a reactive element that's as easy to manipulate as an image.  Kudos to Gregory Gan for his amazing post and tip!