Make iframes responsive using JS

responsive-iframes.js

// This is a slightly modified technique of the one found on:
// https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

(function ($) {
    'use strict';

    let $container = $('.js-responsive-iframes-container');
    let $containerIframes = $container.find('iframe');

    // Figure out and save aspect ratio for each iframe
    $containerIframes.each(function() {

        $(this)
            .data('aspectRatio', this.height / this.width)

            // and remove the hard coded width/height
            .removeAttr('height')
            .removeAttr('width');
    });

    // When the window is resized
    $(window).resize(function() {
        let newWidth = $container.width();

        // Resize all iframes according to their own aspect ratio
        $containerIframes.each(function() {

            let $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.data('aspectRatio'));
        });

        // Kick off one resize to fix all iframes on page load
    }).resize();

})(jQuery);