• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Адаптация видеороликов с Ютуб с помощью Js (Скрипт для плеера, который адаптирует видео с Youtube)
Адаптация видеороликов с Ютуб с помощью Js
workman
Среда, 04 Июля 2018 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Простой скрипт, который адаптирует видео с Youtube и не только, для любых устройств и разрешений экрана.
Например, у вас есть такой iframe c Youtube.



Код
<iframe src="ссылка" width="700" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Обращаем внимание, что у него в width содержится значение 700px. Это значит что на меньших экранах вашего сайта видео будет уходить за рамки сайта или обрезаться. Красиво? Не думаю!!
Добавляем скрипт в конец сайта и вы увидите, что все станет хорошо. 09a 04b
Код
<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>

Возможно кто-то захочет, чтобы скрипт отрабатывал не всегда, а только лишь для мобильных устройств, чья ширина меньше чем 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>
Прикрепления: 8048425.png (36.6 Kb)
Страна: (RU)
waak
Среда, 04 Июля 2018 | Сообщение 2
Оффлайн
Заблокированные
Сообщений:588
Награды: 14
Зачем скрипт? если можно через css?
Страна: (RU)
Kosten
Среда, 04 Июля 2018 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Цитата waak ()
Зачем скрипт? если можно через css?

waak, это хорошо для знаний, что можно через стили, а так через них делать. Так как workman, полный расклад дал.
Страна: (RU)
Kosten
Среда, 04 Июля 2018 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Здесь тему создал на форуме по адаптивности плеера Ютуб. Где все создано на стилях. хотя они мне знакомы, так как ставил на сайт, где еще на сайте Вебочка из, там нашел, но здесь как понимаю некоторые стили, точнее классы добавлены под разные источники от плеера.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Адаптация видеороликов с Ютуб с помощью Js (Скрипт для плеера, который адаптирует видео с Youtube)
  • Страница 1 из 1
  • 1
Поиск: