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

Опубликовано: 01.09.2018

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

Всплывающее окно со встроенным видео с YouTube на JQuery FancyBox

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


Навигация с использованием jQuery

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

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

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


Как вставить видео с Youtube на свой сайт

Добавив скрипт что ниже (в конец сайта, не забудьте подключить 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()

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

rss