Адаптивные YouTube-ролики на сайте

В работе контент-менеджера есть один момент, который может нарушить адаптивность работы сайта - это вставки видео. 
При вставке видео с сервиса YouTube, сервис генерирует код iframe-а, который содержит жесткие размеры ширины и высоты. При открытии страницы на экранах, меньших этих размеров, страница будет "плыть".

Поэтому нужно настроить автоматическое изменение параметров iframe под размеры экрана.

Допустим, наши статьи выводятся в контейнере "div" с классом "news-detail". В таком случае, можем воспользоваться следующим JS-кодом:

var $allVideos = $('iframe[src*="youtube.com"]'),
    $fluidEl = $("div.news-detail");
    $(document).ready(function () {
        $allVideos = $('iframe[src*="youtube.com"]');
        $allVideos.each(function() {
            $(this)
                .data('aspectRatio', this.height / this.width)
                .removeAttr('height')
                .removeAttr('width').resize();
        });
    });
$(window).resize(function() {
    var newWidth = $fluidEl.width();
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
        var $el = $(this);
        $el
            .width(newWidth)
            .height(newWidth * $el.data('aspectRatio'));
    });
}).resize();