Адаптация iframe Youtube с помощью Jquery

Рассмотрим простой скрипт на javascript с использованием библиотеки jquery, который адаптирует видео с Youtube и не только для любых устройств и разрешений экрана.

Рассмотрим на примере, у вас есть такой iframe c Youtube:

<iframe src="https://www.youtube.com/embed/key_video" width="700" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Обратим внимание, что у него в атрибуте width содержится значение 700px. Это значит что на меньших экранах видео будет уходить за рамки сайта или обрезаться.

Добавив скрипт что ниже (в конец сайта, не забудьте подключить Jquery) и обновив страницу вы увидите, что все станет хорошо. )))

Скрипт для оптимизации

<script>
    jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
        var td_video = jQuery(this);
        td_video.attr('width', '100%');
        var td_video_width = td_video.width();
        td_video.css('height', td_video_width * 0.6, 'important');
    });
</script>

Скрипт работает очень просто, он находит все iframe с адресом Youtube (...src*="youtube.com"]...), затем прописывает ему ширину 100%, затем берет значение новой ширины умножает на 0.6 и присваевает новую высоту.

Вы можете подредактировать на любые соотношения, что вам нужны и сделать это для других сервисов, думаю проблем не будет.

Для определенной ширины экрана

Возможно вы хотите, чтобы скрипт отрабатывал не всегда, а только лишь для устройств, чья ширина меньше чем 480px. Тогда вызываем так:

<script>
if ( $(window).width() <= 480 ) {
    jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
        var td_video = jQuery(this);
        td_video.attr('width', '100%');
        var td_video_width = td_video.width();
        td_video.css('height', td_video_width * 0.6, 'important');
    });
}
</script>

Собственно и все. Если будут вопросы, пишите в комментарии. А также если вы знаете способ лучше, пишите, добавим и его.